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Introducción. Léeme. 



Este libro fue escrito por dos educadores de arte quienes dictan clases de arte 
digital y estudios del fundamentos del diseño. 

Mientras dictábamos clases que tomaban lugar en laboratorios de computación, 
nos dimos cuenta que muchos de nuestros estudiantes esperaban aprender el 
programa, sin darle mayor importancia a la estética o la historia del arte y 
diseño. Una pregunta típica del primer día es "¿Vamos a aprender Photoshop 
en esta clase?". 

Al principio nos vimos tentados a saciar la sed de nuestros estudiantes por el 
llamado conocimiento práctico, pero reconocimos que en la ausencia de lo visual, 
teórico e histórico, el conocimiento práctico, es prácticamente inútil. Para enseñar 
nuestras clases, usamos los mejores manuales de entrenamiento, y los complemen- 
tamos con todo el material visual e histórico que faltaba. 

Luego de conformarnos por años con libros que no cubrían realmente una clase, 
decidimos finalmente escribir un libro que pensamos los estudiantes de 
introducción a diseño de medios debería usar. 

En los veinte capítulos que siguen, compartimos pequeños detalles de historia, 
seguido de referencias visuales y luego ejercicios digitales que exploran el 
programa creativo de una manera donde los principios de diseño son incluidos 
en la demostración del programa. Originalmente, este libro fue impreso como un 
manual de Adobe Creative Suite, el programa utilizado en la mayoría de los 
laboratorios y salones de clase del país. A tan solo un mes de publicado, 
formamos un equipo con Manuales Floss para convertir nuestro manuscrito 
en uno que enseña los mismos principios de diseño utilizando programas libres 
y de código abierto. 



Bauhaus 

Este libro es una mezcla entre el Curso Básico de la Bauhaus y programas 
libres como Inkscape, Gimp, Firefox y Processing. Hemos tomado algunos de los 
principios visuales y ejercicios del Curso Básico de la Bauhaus y los adaptamos en 
ejercicios para estos programas. 

La Bauhaus, fue una escuela muy influyente en el arte, diseño y arquitectura en 
Alemania. Operó desde 1919 hasta 1933, tiempo durante el cual transformó la 
educación del arte a través de la integración del arte, artesanía, arquitectura, y 
diseño, su énfasis en materiales modernos y la creación de un Curso Básico. 
El Curso Básico era de un año de duración, en el cual, estudiantes de primer año, 
aprendían composición, teoría del color, y como utilizar una variedad de materiales 
básicos. Cuando muchos de los instructores salieron de la Alemania Nazi hacia 



Estados Unidos y otros países, trajeron con ellos este modelo de educación bajo la 
apariencia de un curso de Estudios Fundamentales. 

Este libro toma su inspiración del modelo de la Bauhaus. 

Usando el Wiki 

El manuscrito original lo escribimos en línea en http://wiki.digital-foundations.net 
y permanecerá en línea para ser utilizado por cualquiera, de manera gratuita. 
Aquí en FlossManuals.net encontrarás los archivos de ejercicios y cualquier otro 
archivo que necesites descargar mientras trabajas con nuestros ejercicios que han 
sido re-interpretados para aplicaciones libres. Puedes descargar todos los archivos 
de ejercicios del enlace "Descargar archivos de ejercicio", y también podrán ser 
encontrados al principio de cada capítulo en línea. 

Creative Commons 

Nuestro texto original, Fundamentos Digitales: Introducción al diseño de medios 
con Adobe Creative Suite se encuentra bajo una licencia Creative Commons Attri- 
bution Non-Commercial 3.0 License por xtine burrough y Michael Mandiberg. 
La licencia se extiende hasta la versión Floss de nuestro texto que aquí aparece. 
Esto significa que cualquier persona puede re-imprimir, re-usar, re-mezclar y crear 
sobre este libro de manera no comercial. Esto incluye la traducción del libro 
(a través del wiki) en otros idiomas, sistemas operativos o paquetes de programas; 
haciendo captura de pantalla de cada capítulo; e incrementando el libro con apéndi- 
ces de ejemplos visuales. Te invitamos a etiquetar tu re-impresión, re-uso, y 
adpataciones re-mezcladas de "fundamentos digitales" y hacernos saber de tu tra- 
bajo mandándonos un correo electrónico a remix@digital-foundations.net. 

Permisos comerciales (con fines lucrativos) que van más allá del alcance de 
esta licencia puede estar disponible en http://wiki.digital-foundations.net/index. 
php?title=Licensing, o contactándonos a permissions@peachpit.com. 
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Las interfaces de los programas de computadoras están escritos bajo metáforas. 
Estas metáforas conectan la interfaz digital con herramientas y procesos en la vida 
real. 

Todos los programas trabajan en sistemas operativos como Mac OS, Windows o 
Linux. Un sistema operativo es el programa de la computadora. Este es el res- 
ponsable de hacer funcionar todos los demás programas. Sin importar el sistema 
operativo que se utilice, todos ellos comparten ciertas metáforas centrales, como 
Documentos, Carpetas, Disco Duro, Programas de Sistema y Escritorio. Antes del 
término actual "oficinas libres de papel", trabajadores en oficinas creaban docu- 
mentos en papel, los archivaban en carpetas y organizaban las carpetas en gabi- 
netes cerca de sus escritorios. Por supuesto, el sistema original de papel persiste 
junto con el sistema computarizado, así como también la estructura metafórica de 
la computadora. 

Las metáforas de programas de diseño están construidas alrededor de las herra- 
mientas de artistas y diseñadores: lápices, pinceles, paletas de colores, soportes 
de trabajo y equipo fotográfico. Estas herramientas hacen lo esperado: los lápices 
hacen líneas de trazos fuertes, los pinceles hacen lineas con control de presión, los 
colores son "mezclados" en la paleta de colores. 

Estas metáforas, son consistentes a través de las interfaces de los sistemas operati- 
vos y aplicaciones de diseño. Por ejemplo, las paletas y barras de herramienta se 
ven y comportan de la misma manera, a pesar de diferencias sutiles de la apli- 
cación, en Illustrator, Gimp, Kompozer, Photoshop, InDesign, Dreamweaver, y 
Flash. Aprender estas metáforas y similitudes a lo largo de las interfaces de éstas 
aplicaciones será la manera más rápida de dominar las herramientas. 
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Ejercicio 1: Crear una carpeta nueva 

1 . Para crear una nueva carpeta en tu computadora, ve al lugar donde quieres 
que tu nueva carpeta se encuentre. La mayoría de los usuarios de computadoras 
guardan carpetas en la capeta de Documentos o en el escritorio. Puedes hacer esto 
haciendo clic en el menú Lugares en la barra de tareas de Ubuntu y seleccionando 
tu lugar preferido para crear la carpeta. Esto abrirá una nueva ventana con el lugar 
que seleccionaste. 
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Abrir los contenidos de su escritorio en una carpeta 
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2. Si hiciste clic en cualquier lugar en el escritorio después de creada la carpeta, 
la nueva carpeta se llamará "sin título". Los nombres de todas las carpetas pueden 
ser cambiados. Apenas crees la nueva carpeta, el sistema operativo la nombrará 
de manera temporal como una carpeta sin título. Mientras no hagas clic fuera del 
nombre de la carpeta, el área del nombre permanecerá resaltado en color naranja, 
lista para que escribas el nombre nuevo. Nosotros nombramos la nuestra funda- 
mentos_digitales y luego presionamos la tecla Return. 




carpeta sin título 



Para cambiar el nombre de una carpeta, haz clic con el botón derecho del ratón una 
vez sobre la carpeta a la que quieres cambiar el nombre y selecciona "renombrar" 
del menú contextual que aparece. El menú contextual aparece al hacer clic con el 
botón derecho del ratón. 
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Seleccionar todo 

Seleccionar elementos que coincidan con. 

Invertir selección 
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Esto resaltará el nombre de la carpeta. Las opciones del menú contextual cambia- 
rán dependiendo del contexto en el que hagas clic. Si haces clic con el botón dere- 
cho del ratón en una carpeta; verás una lista de acciones que podrán ser realizadas 
en esa carpeta. Este menú es diferente del menú que aparecería si hicieras clic con 
el botón derecho del ratón en un archivo, por ejemplo. 
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Ejercicio 1 : Crear una carpeta nueva 



Simplemente cambia el nombre y presiona la tecla Return. Nosotros renombramos 
nuestra carpeta fundamentos_digitales. 

3. Mueve la nueva carpeta fundamentos_digitales que acabas de crear a la carpe- 
ta Documentos, haciendo clic y arrastrándola desde el escritorio hasta la carpeta 
Documentos que aparece en el submenú lugares a la izquierda de cualquier ventana 
abierta. 
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Borrar un Archivo 

4. Ahora vamos a ver tres maneras de borrar un archivo o carpeta. Escoge el 
método de tu preferencia y borra la nueva carpeta que acabas de crear. La papele- 
ra metafórica aparece en la parte inferior izquierda de la interfaz de Ubunu. Para 
borrar un documento, arrástrala a la Papelera. 
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Es importante recordar que normalmente hay más de una manera de realizar 
cualquier acción. El mejor método es que se adapte de manera más eficiente a 
tus hábitos personales de trabajo. 

Otra manera de mover un elemento a la papelera, es seleccionándolo y luego 
presionando Borrar en tu teclado. Los menús contextúales proveen otra manera de 
borrar un archivo. Haz clic con el botón izquierdo del ratón y selecciona Mover a 
la Papelera. 



¡£¡| Abrir 
funda Abrir en una solapa nueva 



dig 



Abrir en una ventana nueva 
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Gráficos Vectoriales vs. 
Gráficos Rasterizados 

Los gráficos de computadora son creados de dos formatos: gráficos vectoriales o 
rasterizados. Los archivos de computadora que contienen estos gráficos, pueden 
contener vectores, gráficos rasterizados o ambos. 

Los gráficos vectoriales, son creados usando algoritmos matemáticos: fórmulas 
que describen donde los puntos, líneas y planos existen, y cómo estos elementos se 
relacionan el uno con el otro. Gráficos vectoriales pueden ser escalados a cual- 
quier tamaño y mantendrán sus bordes suaves. Los gráficos vectoriales se ven más 
suaves y definidos en sus bordes, y pueden ser escalados fácilmente. Logotipos 
son normalmente desarrollados como gráficos vectoriales, debido a que un logo- 
tipo debe ser adaptado fácilmente en una tarjeta de presentación, página web, y 
posiblemente una valla publicitaria o un autobús. 

Inkscape, Illustrator y Flash son aplicaciones que normalmente son usadas para 
crear y modificar imágenes vectoriales. 

Los gráficos rasterizados, son construidos de una estructura de pixels. Cada uno de 
estos pequeños pixels, contienen información de una unidad de color. Los bitmaps 
son usados en fotografía digital e imágenes escaneadas. Los archivos bitmaps no 
son fácilmente escalables como los vectoriales. 

Ambas imágenes están siendo vistas con un zoom de 1600%. Esto significa que 
estamos viendo las imágenes 16 veces de su tamaño actual. Si una imagen ras- 
terizada se amplia mucho, la retícula se vuelve visible al ojo humano. La única 
manera posible de compensar ésto, es haciendo los bordes un poco borrosos. De 
cualquier manera, ampliar una imagen basada en pixels resulta una pérdida de cali- 
dad. Las imágenes vectoriales no tienen esta limitación. Por otro lado, las imá- 
genes vectoriales extremadamente complejas, puede tomar una cantidad excesiva 
de poder de procesador de la computadora. La imagen superior, es una imagen 
rasterizada de una mano. Aquí los pixels individuales que componen la fotografía 
digital son pequeños cuadrados de color. La imagen de la parte posterior, ha sido 
creada en una aplicación vectorial como Inkscape. Observa como los bordes se 
ven de manera definida. 
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Ejercicio 2: Crear un archivo nuevo 
en Inkscape 

1 . Selecciona Aplicaciones del menú superior izquierdo, y selecciona Gráficos > 
Editor de Gráficos Vectoriales Inkscape. 
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2. Cuando Inkscape abre, aparece un documento en blanco. 
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Cuando se define un archivo nuevo, varias características deberán ser tomadas en 
cuenta. Por omisión, el documento creado por Inkscape es de tamaño A4 de fondo 
blanco y orientación vertical. Estas opciones pueden ser cambiadas, seleccionando 
Archivo Propiedades del documento, o presionando las teclas Shift+Control+D. 
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3. En las propiedades del documento, selecciona "US Letter" bajo formato y haz 
clic en la X de esquina superior derecha de la ventana. 
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Estas ventanas, también son conocidas como "diálogos". Un "dialogo" es una 
interfaz que aparece cuando la computadora necesita información para poder com- 
pletar una tarea. Para resaltar la metáfora, la computadora necesita una conversa- 
ción contigo, de ahí la palabra "dialogo". 

Mira tu nuevo documento y nota los elementos de la interfaz. En el centro esta el 
área de trabajo. El diseño análogo fue creado en papel (sujetado a una tabla), el 
cual fue referido como área de trabajo. Inkscape reproduce la experiencia análoga 
a través de la metáfora. 

En en lado izquierdo del área de trabajo, se encuentra la barra de herramientas. 
Como la caja de herramientas de un artista, esta barra de herramientas tiene lápi- 
ces, pinceles, reglas de formas, y demás. 



Ejercicio 2: Crear un archivo nuevo en Inkscape 
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En la parte inferior del área de trabajo, se encuentra la paleta de colores. Los pin- 
tores mezclan pinturas de colores individualmente en una paleta. En Inkscape, los 
colores son creados mezclándolos de manera virtual. 

En la parte derecha del área de trabajo, existe una cantidad de información disponi- 
ble. Nota la ventana de relleno y borde (disponible en el menú Objeto en la barra 
de menú). 

^Relleno y borde (Mayús.+Ctrl+F 

Relleno j^Color de trazo — Eatilo de trazo I 



x DDDD ? 



o« 



Sin objetos 



¿¿Relleno y borde [Mayús.+Ctrl+F) 

Relleno |[ 'color de trazo ^Estilo de trazo 



x DDDD ? 



|o|* 



Sin objetos 



4. Las herramientas pueden ser movidas en la pantalla, y pueden esconderse o 
mostrarse dependiendo del espacio disponible en el monitor. Para esconder algún 
elemento, haz clic en Ver > Mostrar/Ocultar > Barra de controles de herramienta. 



Ejercicio 3: Creando una composición 
dinámica 




Desnudo Sentado , 1909, Amedeo Modigliani, óleo sobre lienzo. 
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El Poeta, 1911, Egon Schiele, óleo sobre lienzo. 

Las composiciones pueden ser estáticas o dinámicas. En este ejercicio, recreare- 
mos el movimiento dinámico encontrado en una pintura. Las composiciones di- 
námicas están llenas de energía o movimiento. Los ángulos son usados para crear 
movimiento. Mientras que un linea horizontal plana es un descanso, un triángulo 
es movimiento. La repetición de espacios equitativos es plácido al ojo, al igual que 
nuestras mentes, los ojos pueden predecir un ritmo simple con una retícula igual- 
mente espaciada. Los ángulos y espacios desiguales entre objetos hacen que nues- 
tros ojos se muevan de lado a lado. Este movimiento físico traduce la percepción 
de movimiento dentro de una composición. Usa la pintura de Modigliani o Schiele 
como guia para la composición dinámica de rectángulos. La composición final 
podría ser como la imagen siguiente, si la que realices esta basada en la pintura de 
Schiele. 




1 . En Inkscape, haz clic en la herramienta de rectángulo de la barra de herramien- 
tas. Usa ésta herramienta para hacer clic y arrastrar el ratón en el área de trabajo. 
De ésta manera, podrás crear un cuadrado o un rectángulo. 



Ejercicio 3: Creando una composición dinámica 
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2. Una vez creado el rectángulo, suelta el ratón y busca la herramienta de selección 
y transformación de objetos. La herramienta de selección es usada para seleccio- 
nar un objeto y luego moverlo, escalarlo o copiarlo. 



E 



re 



-r 



i 5 



\ 



Seleccionar y transformar objetos (Fl) 






Haz clic en el cuadrado con la herramienta de selección. El rectángulo es seleccio- 
nado cuando aparece un contorno y las flechas de transformación aparecen en el 
borde del objeto. Los objetos sólo pueden ser modificados cuando son selecciona- 
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dos. Para deseleccionar un objeto, haz clic en cualquier lugar del área de trabajo 
fuera del rectángulo. 

3. Con el rectángulo seleccionado, nota como la forma esta hecha. El rectángulo 
es un área rellena con color y puede que haya o no una linea rodeando los bordes. 
El color interior es llamado "relleno". La linea es llamada "trazo" o "borde". 

4. Con el rectángulo seleccionado, mira la esquina inferior izquierda en la interfaz 
de Inkscape, y nota los colores que aparecen al lado de Relleno y bordes. 

5. Con el rectángulo seleccionado, haz clic en una de las muestras de colores en la 
paleta. El color sera asignado al área de relleno del rectángulo y también aparecerá 
como el color en el icono de relleno. El rectángulo cambiará debido a que se ha 
seleccionado un color nuevo. 





Quitar 



6. Haz clic en la paleta de opciones de colores, luego haz clic en cualquier color. 
El color seleccionado será asignado al icono de color de relleno. El rectángulo 
cambiará ya que fue seleccionado antes de que el color fuera aplicado. 

7. Con el rectángulo seleccionado, selecciona Relleno y Borde del menú Objeto. 
Esto abrirá una ventana nueva en la parte derecha de la pantalla. Haz clic en la 
pestanilla llamada color de trazo. En la primera fila de iconos, selecciona la "x" 
a la izquierda, indicando que no quieres que el rectángulo tenga un borde. Esto 
dejara el rectángulo con un color solido sin linea de borde. 



Ejercicio 3: Creando una composición dinámica 
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8. Con la herramienta de selección, escala o rota el rectángulo. Para escalar 
el rectángulo, haz clic en una de las flechas de transformación en el borde del 
objeto y arrástrala hacia el centro o lejos del centro. 




Para rotar el triángulo, haz clic en él de nuevo, y las flechas de transformación 
cambiarán a flechas de rotación. Haz clic y arrastra una de éstas flechas para poder 
rotar la figura. 
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9. Cuando el primer rectángulo esté listo (con el color, escala y rotación deseada), 
deselecciona el rectángulo haciendo clic en el área de trabajo. Nota que la caja 
envolvente y las flechas de transformación y rotación desaparecen. 

10. Usa la herramienta de rectángulo para empezar el proceso de nuevo. Una vez 
hecho el rectángulo y modificado, usa la herramienta de selección para reposicio- 
narlo hacia la derecha, izquierda, arriba o abajo del otro rectángulo. La composi- 
ción puede ser creada con al menos 15 formas. Deberás sentirte cómodo al crear 
las formas, y cambiar sus colores de relleno y borde. 

1 1 . Arregla los rectángulos de manera que puedan ser vistos como una composi- 
ción dinámica. Nota que a medida que creas y posicionas cada rectángulo, apare- 
cerán amontonados uno encima del otro. Mientras creas la composición, tal vez 
quieras que alguno de los rectángulos sea "enviado hacia atrás" de otro rectángulo. 
Selecciona el rectángulo que quieres enviar hacia atrás, luego haz clic en "Bajar se- 
lección al fondo", este botón se encuentra en la barra de controles de herramientas. 
Puedes cambiar el orden de cada objeto en el área de trabajo usando los botones 
alrededor: Bajar la selección un nivel, Elevar la selección un nivel y Elevar los 
objetos a primer plano. 



Ejercicio 3: Creando una composición dinámica 
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Ejercicio 4: Guardando un archivo 

Haz clic en Archivo > Guardar como, para abrir la ventana de guardar. Escoge 
el lugar donde quieres guardar el archivo. Es común guardar los archivos en la 
carpeta llamada Documentos. Para acceder a la carpeta de Documentos desde la 
ventana de Guardar Como, haz clic en Documentos en la parte izquierda. Ante- 
riormente creamos una carpeta llamada "fundamentos_digitales" en la carpeta de 
Documentos. Nuestro trabajo será guardado ahí. 

Nota: Algunas acciones que pueden ser hechas con tu archivo se encuentran en el 
menú Archivo. 

Debes nombrar tu archivo para salvarlo. Sigue las siguientes convenciones para 
los nombres: 

• Evita espacios, en su lugar usa guiones_de_subrayado_para_separar_palabras. 
Los espacios son peligrosos en navegadores de Internet. Cualquier diseñador 
que planee trabajar en algún medio interactivo, deberá formar buenos habito 
eliminando los espacios en los nombres de sus archivos. 

• Usa letras minúsculas. Esto también es una convención que diseñadores usan 
al nombrar los archivos que serán referenciados en código. Espacios y letras 
mayúsculas pueden dañar tus archivos, pero si estas empezando a formar bue- 
nos habito, es bueno aprender estas reglas de una vez. 

• Nunca uses caracteres como los que aparecen en la lista siguiente, ya que los 
caracteres especiales tienen un significado especial en aplicaciones y sistemas 
operativos y pueden quedar deshabilitados en paginas web y trancar aplicacio- 
nes. 

Los siguientes son ejemplos de esos caracteres: !@#$% A &*() + = ~[]'"?/ 
\,: ;>< 

• Usa un titulo descriptivo, por ejemplo xtine_compsiciondinamica.svg. In- 
cluyendo tu nombre completo en el nombre de un archivo es especialmente 
importante si estas entregando un archivo en una clase o profesionalmente. 

• Asegúrate de que el archivo tenga la extensión incluida. En este ejercicio, el 
archivo fue salvado como un documento SVG (.svg). La extensión es .svg. 
En otras palabras, el peor nombre que podrías usar seria algo como esto "Mi 
mejor/primer archivo!". No solo el nombre incluye espacios y caracteres re- 
servados. También falla en describir el formato del archivo. Otros nombres no 
recomendados son parecidos a "EdicionFinal.svg", "final.svg", "composición. 
svg", y otros nombres que no especifiquen quien hizo el archivo, o que es el 
archivo. Un mejor modelo es de nombrar los archivos incluyendo tu nombre o 
de un grupo, una palabra descriptiva sobre el contenido del archivo, y una fe- 
cha o versión del sistema. Por ejemplo, cuando enviamos una copia de nuestra 
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cubierta al editor el 20 de Octubre, lo nombramos fundamentosdigitales_cu- 
bierta_1020.svg. 



Formatos de archivo nativos para archivos maestros 

Casi todas las aplicaciones tienen un formato de archivo nativo para archivos 
maestros. Este formato puede ser abierto únicamente en el programa original, y 
debería ser salvado frecuentemente durante el proceso de trabajo. Una copia del 
archivo maestro es usualmente creada en un formato comprimido, no editable y 
fácil de transferir. Estos formatos comprimidos pueden ser leídos por muchas 
aplicaciones, no solo el programa original. Un sufijo .svg indica que el archivo es 
un archivo maestro Inkscape. Si un logotipo, por ejemplo, fue creado en Inkscape, 
podría ser compartido con un amigo o colaborador como un archivo PDF, el cual 
puede ser visto en un explorador de documentos, Ghosview, xpdf , Adobe Acrobat 
o Vista Previa. Los lectores de PDF como estos se encuentran instalados en la 
mayoría de las computadoras. Los archivos exportados no pueden ser editados y 
usualmente son de tamaño menor. Si el amigo pide una revisión del logotipo, el 
SVG original puede ser modificado. Luego de la molificación, se puede crear un 
nuevo PDF y enviarlo de nuevo a nuestro amigo. 

Formatos de Archivos 

Es muy importante que las extensiones de los archivos o sufijos, permanezcan in- 
tactos. La extensión asiste al sistema operativo de la computadora. Le dice al sis- 
tema que tipo de aplicaron deberá ser usada cuando se quiera abrir el archivo. Esto 
es especialmente importante cuando se trasladan archivos de un sistema operativo 
a otro (como de un Mac a un PC) . 

Algunos formatos importantes incluyen: 

.svg - Formato Scalable Vector Graphics, el formato nativo de Inkscape. 

.doc o .docx - documento Microsoft Word 

.rtf - formato Rich Text Format, formato de documento de procesador de palabras. 

.txt - solo texto, sin formato. 

.ai - archivo Adobe Illustrator. 

.pdf - Portable Document Format. 

.psd - documento Photoshop. 

. tif o .tiff - Tagged Image File - formato para fotografías, salvadas con compresión 
y usadas para escanear e imprimir. Este formato sera revisado en el Capitulo 7 . 
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jpg o -jpeg - Joint Photographic Experts Group - un archivo de imagen comprimi- 
da usado normalmente para fotografías en Internet. 

.gif - Graphic Interchange Format - un archivo de imagen comprimido usado nor- 
malmente en Internet para logotipos, elementos de diseño y otros gráficos con un 
bajo numero de colores. 

.html - HyperText Markup Languague - un archivo de texto escrito en el lenguaje 
usado para crear paginas web. 

.fia - archivo Flash. 

.swf - Shock Wave Format - exportado desde flash para Internet 
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Simetría y Gestalt 



La simetría se obtiene cuando el peso de una composición está balanceado unifor- 
memente. Las formas simétricas son percibidas por ser estables. A fin de lograr 
simetría y composición, el diseñador debe crear balance con los objetos que está 
componiendo, tanto en su espacio positivo como en el negativo de acuerdo a la 
retícula. El espacio positivo, normalmente contiene los elementos de diseño acti- 
vos, mientras que el espacio negativo en una composición simétrica, es usualmente 
pasivo. 



Lo contrario a la simetría es conocido como asimetría. Las composiciones asimé- 
tricas, pueden ser balanceadas o desbalanceadas, a fin de lograr las expectativas 
visuales o psicológicas en su audiencia. Estas decisiones conectan el concepto 
del material presentado con la presentación. Por ejemplo, el logotipo de un banco 
debería transmitir estabilidad y tranquilidad, connotando seguridad y honradez, 
mientras que el afiche de una película de terror, debería sentirse cargado emocio- 
nalmente, con suspenso y atemorizante. Los logotipos para bancos tienden a ser 
composiciones simétricas, y los diseños asimétricos, son usados para expresar 
ideas de inestabilidad. 




El librario, anuncio para la publicación literaria New York, llamada "El librado" 
de Abril de 1986. Este anuncio, es asimétrico debido a que la escala y luminosidad 
de la figura femenina en el primer plano, hace balance con la escala y oscuridad de 
la figura masculina al lado derecho de la imagen. La simetría es reflejada sobre el 
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eje Y, en el centro de la composición. La tipografía se encuentra centrada tanto en 
la parte superior como en la inferior del anuncio. 



... .. — ríf >_j r 
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El Hombre de Vitruvio de Leonardo da Vinci, dibujo en papel 1492. Fotografia- 
do por Luc Viatore en 2007 . El clásico dibujo de Leonardo da Vinci de la forma 
humana, demuestra el principio de simetría en el cuerpo humano. 




Codex Ausureus de St. Emmeram, Escena: Retrato de Abbot Ramwoldus. Libro 
pintado sobre pergamino por Adalpertus, 1000. La simetría es lograda en el libro 
de pinturas de Adalpertus a través del eje X y el eje Y. 
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Ejercicio 1: Creación de simetría y asimetría 
con tu cuerpo 

Antes de tocar el lápiz o el ratón, puedes ejercitar estos principios de diseño como 
lecciones de distribución de peso. 

La retícula es creada por el eje X a lo largo de la cadera, y por el eje Y desde los 
pies hasta la cabeza. 

De pie, con el cuerpo derecho, con la postura perfecta, y tu cuerpo equitativamente 
balanceado en los dos pies (con las piernas separadas, alineadas con la cadera y 
con las rodillas un poco flexionadas, si somos bien específicos), pon el cuerpo en 
una posición estable y simétrica. 

Una vez lograda la simetría, levanta un pie del suelo. Dobla la rodilla de la pierna 
levantada hasta el punto de no dejarte caer. Sentirás como el balance se pierde y 
menos estabilidad, de esta manera, tu cuerpo ha logrado la asimetría. 

Resultados de algunos arreglos hechos en el ejercicio del Capítulo 3 





En los ejercicios siguientes (2-7), cada una de las composiciones serán creadas 
en cuadros individuales (algunos de los cuales están ilustrados aquí). Todos los 
ejercicios serán creados en un solo documento, establecido en el Ejercicio 2. Para 
estas composiciones, la retícula es sencilla: la intersección horizontal y vertical 
en el centro de cada cuadrado es la retícula. Mira y "siente" el peso visual que 
es construido entre los cuatro cuadrantes (superior izquierdo, derecho, inferior 
izquierdo, derecho) en cada composición. 
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Ejercicio 1 : Creación de simetría y asimetría con tu cuerpo 



Ejercicio 2: Simetría con espacio negativo 
pasivo 

En este ejercicio, el círculo negro en el centro de la composición es el espacio 
positivo y el área blanca alrededor, el espacio negativo. El espacio negativo no 
es activo, está subordinado a la forma activa positiva. El círculo está igualmente 
distribuido dentro de la composición. Es perfectamente simétrico en relación con 
ambos ejes X y Y, de derecha a izquierda, de arriba a abajo. 

1. Crea un nuevo documento en Inkscape usando Archivo > Nuevo, luego selec- 
ciona Archivo > Propiedades del documento para seleccionar el tamaño US Letter, 
con medidas 8,5 x 11 pulgadas. 

2.Selecciona la herramienta de Rectángulo. Mientras presionas la tecla Control, 
haz clic y arrastra el ratón a través del área de trabajo para crear un cuadrado. 
Nuestro cuadrado mide 1 ,5 x 1 ,5 pulgadas (las dimensiones exactas pueden ser es- 
tablecidas por el (W) ancho y (H) alto en la barra de control de herramientas sobre 
el área de trabajo). 
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3. Selecciona el cuadrado haciendo clic en el con la Herramienta Seleccionar y 
Transformar objetos. Selecciona Objeto > Relleno y Borde, para establecer el 
relleno de color blanco, con un borde negro, y el estilo de borde con el valor que 
selecciones, el nuestro es de 2px. 

4. Selecciona el cuadrado haciendo clic con la herramienta Seleccionar y Transfor- 
mar objetos, si no está seleccionado. Crea una figura de cuadrados de 4x4, selec- 
ciona Edición > Clonar > Crear clones en mosaico, luego, en la etiqueta Simetría, 
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establece el valor para ambas filas y columnas a 4. Haz clic en el botón Crear. Va 
a haber un mosaico extra duplicado en la esquina superior izquierda. Selecciónalo 
con la Herramienta Seleccionar y Transformar objetos y bórralo presionando la 
tecla Borrar. 
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5. Selecciona todos los 16 cuadrados rodeándolos con la Herramienta Seleccionar 
y Transformar objetos. Crea un espacio entre los cuadrados usando Objeto > Filas 
y Columnas, y establece las filas y columnas de 4 x 4 y el espacio entre ellas con 
cualquier valor que decidas. Nosotros usamos 30x30 px. 
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Simetría y Gestalt 



6. Agrupa los 16 cuadrados, seleccionándolos otra vez. Objeto > Agrupar. Los ob- 
jetos agrupados pueden ser movidos, transformados y editados como una unidad, 
siempre y cuando sus propiedades individuales se mantengan. Mueve la retícula 
de cuadrados al centro del documento. 

7. Selecciona el menú Capa > Capas, para ver el diálogo de capas. El nombre por 
omisión de la capa en la que estás trabajando es Capa 1 , pero puedes hacer doble 
clic en el nombre de la capa para renombrarlo en algo más descriptivo, como Retí- 
cula. 

8. Usando el menú Capa > Añadir capa, para agregar una nueva capa sobre la que 
estamos trabajando. Asígnale un nombre descriptivo como Puntos. 

9. En el diálogo de capas, haz clic en el icono del candado al lado del ojo, en la 
capa llamada Retícula. El icono del candado va a cambiar de abierto a cerrado, 
indicando que la capa esta bloqueada. Las capas bloqueadas no pueden ser modi- 
ficadas hasta que sean desbloqueadas. Esta es una medida de protección que el di- 
señador utiliza eventualmente cuando parte del proyecto está finalizado y no quiere 
seleccionar y mover objetos accidentalmente que han sido establecidos. 



QCapas ÍMayús,+Ctrl+L) 
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10. Asegúrate de que la capa llamada Puntos esté seleccionada, para trabajar en 
esta capa, no en la que se encuentra debajo con la retícula de cuadrados. 

11 . Crea un círculo negro en el centro del cuadrado superior izquierdo con la 
herramienta de Círulos, elipses y arcos. Selecciona la herramienta y luego haz clic 
y arrastra el puntero de manera que la elipse sea un círculo perfecto. Selecciona 
Objeto > Relleno y borde, y establece el relleno de color negro para el círculo que 
haz creado. 



Ejercicio 2: Simetría con espacio negativo pasivo 
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Ejercicio 3: Simetría con espacios negativos 
menos pasivos 

En este ejercicio, los nuevos círculos crean balance y una composición simétrica. 
El peso visual es el mismo en los cuatro cuadrantes creados por la intersección del 
eje X y Y; y los círulos son reflectivos sobre la línea diagonal. Sin embargo, nota 
la tensión entro los dos círculos en el medio de la página. Esta tensión es creada 
cuando dos formas activas están tan cerca la una de la otra, que el ojo no puede 
evitar de ver el espacio negativo entre ellas. El espacio negativo pelea por la 
atención del expectador. De manera que el espacio negativo es menos pasivo que 
el del primer ejercicio. 




1. Copia el círculo negro usando la Herramienta Seleccionar y Transformar objetos, 
luego Edición > Copiar, seguido de Edición > Pegar, para crear una copia. Usando 
la Herramienta Seleccionar y Transformar objetos, arrastra la nueva copia en el 
cuadrado a la derecha del círculo original. 
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Simetría y Gestalt 



2. El nuevo círculo deberá estar seleccionado aún, y las flechas de transformación 
rodeando los ejes del área seleccionada. Usa la Herramienta Seleccionar y Trans- 
formar objetos para reducir la escala del círculo haciendo clic y arrastrándolo por 
una de las flechas de transformación en la esquina del círculo mientras presionas la 
tecla Control. 

Atención: si eres nuevo usando el ratón y teclado a la vez, practica usando tu mano 
que no manipula el ratón para activar las teclas mientras mantienes la otra mano 
sobre el ratón. Es inefectivo levantar la mano que utilizas para manejar el ratón. 



FC 







O - 



3. Haz otra copia del círculo, seleccionando Edición > Copiar, seguido de Edición 
> Pegar. Coloca el círculo en posición usando las teclas de las flechas arriba, aba- 
jo, derecha e izquierda. Las teclas de flechas moverán el objeto seleccionado una 
unidad. Presionando la tecla Shift mientras presionas las teclas de flechas mueve 
el objeto en incrementos de 10. 





Ejercicio 3: Simetría con espacios negativos menos pasivos 
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Ejercicio 4: Asimetría balanceada 



En este ejercicio los dos círculos creados hacen una composición asimétrica. La 
distribución del peso entre los cuatro cuadrantes de la composición no es igual, 
debido a que la mayor parte del peso visual se siente en el cuadrante superior 
izquierdo. La composición se mantiene balanceada, ya que el espacio negativo 
entre los dos círculos activa la atención del expectador y se convierte en parte del 
peso visual de la página. El área blanca sigue siendo espacio negativo, sin embar- 
go, el área blanca entre los dos círculos se encuentra dentro de la trayectoria del 
movimiento del ojo del expectador, del círculo superior (mayor) al círculo inferior 
(menor). 

1 . Copia el segundo círculo del ejercicio anterior, y colócalo dentro del tercer cua- 
drado. 

Atención: ¿El círculo se convirtió en elipse? Sin mantener presionada la tecla Ctrl, 
los círculos se transforman en elipses. Asegúrate de soltar el ratón antes de soltar 
la tecla cuando dibujes figuras que están siendo modificadas por comandos del 
teclado. 

2. Haz otra copia de este círculo y colócalo en la parte derecha inferior de la com- 
posición. 




3. Escala el círculo a un tamaño menor con la Herramienta Seleccionar y Transfor- 
mar objetos mientras presionas la tecla Control. 
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Ejercicio 4: Asimetría balanceada 



Ejercicio 5: Asimetría con peso visual 
desbalanceado 

En este ejercicio, el espacio negativo es el área blanca rodeando los cuatro círculos 
negros. Los cuatro círculos negros son asimétricos considerando la composición. 
El espacio negativo crea más masa que el espacio positivo, los cuatro círcuos ne- 
gros hacen que el ojo del expectador vaya a la parte inferior de la composición. 
Otra cosa que es importante notar sobre este ejercicio, es que los cuatro círculos 
negros son leídos como una línea por la ley de similitud de la gestalt, donde ele- 
mentos similares (cuatro círculos) son leídos como una línea antes de ser percibi- 
dos individualmente. 

1 . Copia el círculo más pequeño en el cuarto cuadrado y muévelo a la composición 
vacía de la derecha. 

2. Crea tres copias del círculo pequeño en la composición. 




3. Selecciona los cuatro círculos usando la Herramienta Seleccionar y Transformar 
objetos haciendo clic y arrastrándolos, o seleccionando el primer círculo, luego 
presionando la tecla Shift mientras haces clic sobre cada círculo con el ratón, agre- 
gándolos a la selección. 

En el laboratorio, llamamos a esto "Shift-cliquear". Ya que nos referiremos a 
"Shift-clicear" en capítulos posteriores, esto siempre significará presionar la tecla 
Shift mientras se hace clic en algún objeto, de manera de agregarlo a la selección. 

4. Con los cuatro círculos seleccionados, mira el diálogo de alinear y distribuir, 
seleccionando Objeto > Alinear y distribuir, el diálogo podrá ser usada para distri- 
buir los cuatro círculos pequeño de manera uniforme. Haz clic en botón de Centrar 
en el eje horizontal (segunda fila de arriba a abajo, tercero de izquierda a derecha) 
y luego en Distribuir los centros horizontalmente a distancias iguales (tercera fila 
de arriba a abajo, segundo botón de izquierda a derecha) para alinear los círcuos 
verticalmente y crear un espacio uniforme entre ellos. 
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Ejercicio 6: Simetría y Creación de Patrones 



La psicología Gestalt es importante para creadores visuales porque provee una teo- 
ría en cómo los humanos perciven grupos de formas en una composición. Mien- 
tras existen cuatro propiedades distintas y seis leyes, uno de los temas principales 
es entender que el expectador ve un grupo de objetos parecidos como un todo antes 
de verlo en partes individuales. Llamado ley de similitud, los círculos individuales 
serán leídos después de que el expectador vea el patrón completo presentado aqui 
como un cuadrado. Es casi magia: un grupo de círculos se convierte en un cuadra- 
do. 

1. Selecciona los cuatro círculos en la fila del ejercicio 5. Selecciona el menú 
Objeto > Agrupar. Agrupar objetos es conveniente mientras los objetos separados 
mantengan su autonomía actuando como parte de una colección que se mueve, 
transforma y recibe información de color al mismo tiempo. Objetos agrupados 
siempre pueden ser desagrupados seleccionando Objeto > Desagrupar. 

Hot Key: Command + G es una manera rápida de agrupar objetos a través del 
teclado. Command + Shift + G es el comando para desagrupar los objetos. 

2. Copia y pega la fila de círculos cuatro veces en la composición siguiente, the 
manera que hayan 16 círculos dentro de la composición. Usa el diálogo de Alinear 
y Distribuir para arreglar las columnas que no estén organizadas (intenta seleccio- 
nar las cuatro filas y usar el botón "Alinear lados izquierdos"). 

3. Selecciona las cuatro filas y haz clic en "Distribuir los centros horizontalmente a 
distancias iguales". 
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Ejercicio 6: Simetría y Creación de Patrones 
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Ejercicio 7: Un punto focal definido dentro de 
un patrón asimétrico 



En el último ejercicio, la reptetición de los diez y seis círculos crean un patrón. En 
este ejercicio, la repretición será rota al cambiar el valor de tono de uno de los 
círculos (uno parte del todo) en el cuadrante inferior derecho de la composición. 
Un punto focal es creado por el contraste de valor y tono. Cuando el contraste 
entre formas iguales y desiguales es un extremo como en este ejercicio, el diseña- 
dor puede dirigir el ojo del expectador a una parte en específico de la composición. 
Utilizando contraste para crear un punto focal, es una destreza escencial en el 
diseño. 

1. Selecciona todos los círculos del ejercicio 6, copia y pégalos en la siguiente com- 
posición de cuadrados. 

2. Una vez compuesto el grupo de círculos negros en el último espacio de la 
composción, cambia el color de relleno de uno de los círculos para crear un punto 
focal. Todos los círculos negros son parte de un grupo, así que necesitarás selec- 
cionar el grupo del círculo individual que quieres modificar y hacer clic (Objeto > 
Desagrupar) primero. Tal vez debas desagrupar dos veces para llegar al nivel de 
círculos indviduales. 

3. Una vez seleccionado el círculo individual al que quieres cambiarle el color, se- 
lecciona Relleno y borde (Objeto > Relleno y borde) para cambiar el color. Nota 
que mientras el valor se aclara, el contraste aumenta. 



\-X-f 



• ••• 
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Ejercicio 7: Un punto focal definido dentro de un patrón asimétrico 



Ejercicio 8: Juego Libre 

Usa la composición de cuadrados restante para hacer los arreglos que decidas. 
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Tipografía en la Retícula 

Para muchos estudiantes y educadores, La Bauhaus se ha convertido en un punto 
de entrada simbólico al arte y la educación de diseño. La precisión de la retícula 
en diseño y arquitectura fue hecho relevante a través de los estudios de La Bau- 
haus. En "El ABC de la Bauhaus y la teoría del diseño" de Ellen Lupton, el 
movimiento es acreditado como ser "el origine mítico del modernismo" como fun- 
dador, Walter Gropius y Lazlo Moholy-Nagy eran devotos de crear un "lenguaje 
universal" y adoptaron métodos de producción en masa (Lupton y J. Abbot Miller, 
2). 

La retícula es utilizadas en todas las áreas del diseño como una estructura sobre la 
cual formas pueden ser ubicadas de manera precisa, reflejadas, balanceadas o des- 
balanceadas. La retícula es la estructura invisible que esta en el fondo y sostiene la 
relación entre todos los elementos formales en diseño impreso, diseño interactivo, 
diseño industrial, arquitectura, moda y máss. Sus orígenes han sido establecidos 
en la era del Neolítico (4500 - 3500 A.C.), según Joseph Campbell quien define la 
retícula como "una organización geométrica en un campo estético". Mientras el 
origen de la retícula como una estructura organizacional que precede el movimien- 
to de arte y la institución de La Bauhaus por mas de 5.500 anos, el movimiento 
de La Bauhaus percibió la retícula no solo como una estructura organizacional, 
sino como una estructura que fácilmente podría ser multiplicada y reproducida. 
Al entender la relación entre la retícula y los requerimientos de organización y 
de automatización de la producción en masa, La Bauhaus, es responsable por las 
soluciones de diseño utilizando la retícula que se convirtió popular en 1920 y es 
aun notable en al actualidad. 














Titulo de la imagen: Composición IV, Theo van Doesburg, óleo sobre lienzo, 1924. 
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Piet Mondrian y Theo van Doesburg crearon pinturas al óleo de estructuras de 
retículas que ilustraban los fundamentos del Modernismo. Mondrian fue un pintor 
Holandés quien contribuyo con el movimiento De Stijl (en Español, "El Estilo"), 
fundado por Theo van Doesburg. A pesar de que ni Mondrian ni van Doesburg 
eran maestros de La Bauhaus, miembros de la Bauhaus sabían de De Stijl y eran 
influenciados por movimientos de arte modernos. Estas composiciones de retícu- 
las han sido la inspiración de artistas y diseñadores quienes cuentan con la retícula 
como una parte importante del diseño organizacional. 

Mientras que las pinturas en blanco y negro con breves áreas en tonos vibrantes 
de colores primarios parecían ser simples intersecciones verticales y horizontales, 
la interpretación puede hacer alusión al mapa de una ciudad, un circuito eléctrico 
o un plano abstracto. El espacio negativo en la composición puede ser percibido 
como ventanas de edificios altos. La retícula es entendida como 
la disposición o estructura de soporte mientras estas composiciones son la esencia 
de los notables fundamentos de modernidad. Formulando un concepto abstracto, 
desde lineas simples a planos, es una forma de practica en traducir sugerencias 
visuales en significados basados en el lenguaje. Es una meta para cualquier comu- 
nicador visual el aprender hacer esto, como también ser el lector del mensaje y el 
generador del contenido visual. 

Avance: Esto es lo que harás en los ejercicios siguientes 
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Avance: Esto es lo que harás en los ejercicios siguientes 
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Ejercicio 1: Usando guías para crear 
una retícula 

1 . Crea un nuevo documento seleccionando Archivo > Nuevo. Usa Archivo > 
Propiedades del documento para establecer el tamaño del documento a 8 .5 por 1 1 
pulgadas (US Letter). 
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Selecciona Archivo > Guardar como y nombra el archivo la_reticula. Sera guar- 
dado automáticamente como un archivo de formato SVG. 

4£ Nuevo documento 1 - Inkscape | _ || □ ||~x~] 
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2. Las reglas pueden mostrarse u ocultarse. Ellas aparecen en la parte superior y 
a la izquierda de la ventana del documento. Si las reglas están ocultas, activalas 
seleccionando Ver > Mostrar/Ocultar > Reglas. Si la medida de las reglas no esta 
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en pulgadas, selecciona Archivo > Propiedades del Documento, y selecciona la 
pestanilla de Pagina, en la opción General, cambia la unidad de medida predeter- 
minada. 

3 . En este paso crearemos guías al hacer clic con el ratón en las reglas del docu- 
mento y arrastrando las nuevas guias hacia la pagina. Inkscape dispone de guias. 
Estas guias son siempre sacadas de las reglas hacia la pagina. Las guias son usadas 
para hacer una retícula visible en la pagina, siendo útiles para alinear elementos de 
la composición como texto o gráficos. La retícula aparece cuando dos guias (una 
horizontal y una vertical) se intersectan. La retícula es normalmente usada para 
ver la relación de los elementos formales dentro de la composición (imágenes y 
texto) con el espacio positivo y negativo (donde otros elementos están y donde no 
hay nada mas que un espacio vacio). 

Haz clic en la herramienta de selección, luego ubica tu cursor dentro del área de 
la regla ubicada en la parte superior del documento. Haz clic en la regla y arrastra 
el ratón hacia abajo. Una guia sera colocada en el lugar donde sueltes el ratón. 
Suelta la primera guia a la altura de 5 pulgadas de la regla ubicada en la parte 
izquierda, en el borde de la pagina. 

¡Atención! Si sueltas el ratón muy pronto, las guías serán creadas en lugares 
donde no las quieres. 



4. Repite este paso para la guía vertical, sacándola de la regla vertical ubicada en 
la parte izquierda y soltando el ratón a 4 pulgadas de la regla ubicada en la parte 
superior. 
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Ejercicio 2: Líneas 



Las líneas pueden ser delgadas o gruesas, con textura o sin textura, punteadas 
o sólidas, derechas o curvas. Una línea es el resultado de conectar dos puntos 
cualquiera en un plano. En este ejercicio haremos una línea recta, gruesa y negra. 
En ejercicios de capítulos posteriores, crearás líneas con la repetición de formas 
simples o con objetos reproducidos fotográficamente dentro de una composición. 
Las líneas pueden ser utilizadas para proveer dirección, separar partes en una 
página, o apoyar elementos en los cuales imágenes o tipografía descansa. Muchas 
de las referencias visuales de La Bauhaus (1919 - 33), incluyen líneas pesadas que 
son usadas para separar áreas de una página y proveen dirección a la mirada del 
espectador. Nota que a pesar de que la línea que creemos separará el cabezal del 
cuerpo en la página, no corta la página en dos partes distintas, trazándose de lado a 
lado en el documento. Al dejar espacio negativo en la parte izquierda de la com- 
posición, las líneas crean un espacio negativo que empuja la mirada del espectador 
hacia el cuerpo dentro de la composición. 

1 . Haz clic en la herramienta de Curvas Bézier y Líneas Rectas. Haz clic en algún 
punto del área de trabajo, suelta el ratón y luego muévelo a una nueva locación y 
haz clic de nuevo. Habrás creado una línea. Presiona la tecla Enter o Return para 
terminar de dibujar el segmento de línea. Crea una nueva línea recta sobre la guía 
horizontal. Presiona la tecla Control, de Esta manera, la línea se mantendrá estric- 
tamente sobre la línea horizontal. 



2. Si quieres que la línea sea negra, utiliza la herramienta de selección y haz clic 
sobre la línea. Sabrás si esta seleccionada si las flechas de transformación apare- 
cen en las esquinas del segmento de línea. Selecciona Objeto > Relleno y Borde, 
luego selecciona cualquier color para el borde y el relleno que desees. 



. I ti . I o . i . I , i . [ . i . I , i . I 1 , i . I , i , l s . i C^ [^Relleno y borde (Mayús.+Ctrl+F! 
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Ejercicio 2: Líneas 



3. Ajusta la línea de manera que empiece por lo menos una pulgada del borde iz- 
quierdo de la página usando la herramienta de selección. La línea deberá extender- 
se más allá del borde derecho de la página. Cualquier elemento fuera de la página, 
representado por un cuadro negro en el área de trabajo, no será impreso. 




4. Haz clic en cualquier parte del área de trabajo para que la línea no siga estando 
seleccionada, ten cuidado de no seleccionar las flechas que rodean la línea. 

Ejercicio 3: Usando la herramienta de texto 
para crear un titular 

Los titulares son usualmente más grandes que el contenido del cuerpo de la pá- 
gina, y tienen más peso que lo demás elementos en la página. La escala del titular, 
normalmente está relacionada con la escala de una fotografía o ilustración que lo 
acompaña (puede ser el mismo ancho, la mitad del ancho, por ejemplo, como la 
fotografía en la primera página de un periódico). Las fuentes del sistema (fuen- 
tes que viene instaladas en las computadoras como Arial, Chicago, Times, New 
York y demás) son usualmente reservadas para el contenido del cuerpo en páginas 
web; y no so usadas normalmente para titulares. Para diseñadores de impresos, es 
buena idea mantenerse lejos de las fuentes de sistema. Los diseñadores de páginas 
web pueden usarlas y confiar en ellas para los contenidos. Las fuentes decorati- 
vas (fuentes ornamentales, como las que pueden ser descargadas gratuitamente 
de páginas web como http://chank.com/freefonts.php) no son lo suficientemente 
legibles para ser usadas en el cuerpo del texto, pero son usadas con frecuencia para 
titulares, ya que tienden a ser más ornamentales. Las fuentes San Serif (sin serif), 
fueron inventadas por William Caslon IV (1816) y como escribe John Kane en su 
"Manual de Tipografía" fue reservado "casi exclusivamente para titulares" (36). 
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Usar fuentes sans-serif para titulares no es una regla, pero normalmente son utiliza- 
das ya que llaman la atención ya que son autoritarias y elegantes en comparación 
con la fuentes serif. En este ejercicio, Gilí Sans fue la fuente usada tanto para los 
titulares como para el contenido. El peso ultra-bold crea un titular pesado, y la 
variación regular de la tipografía hacen que el cuerpo sea de fácil lectura. 

1 . Selecciona la herramienta de texto en la barra de herramientas. 

2. Haz clic en cualquier lugar del área de trabajo con la herramienta de texto. No 
arrastres el ratón, solo haz clic. El hacer clic una sola vez, cambiará la herramienta 
en un cursor parpadeante. Cuando veas el cursor parpadeante, comienza a escribir 
"Sistemas Reticulares". Inkscape es programa inteligente, pero no sabe cuando 
haz terminado de usar la herramienta de texto. Debes decirle "ya terminé". Cu- 
ando termines de escribir el titular, haz clic en la herramienta de selección. El 
texto será seleccionado automáticamente como un objeto y el cursor parpadeante 
desaparecerá. 

3. Una vez creado el texto, puede ser editado. Si el texto no esta seleccionado, haz 
clic en él con la herramienta de selección. 



4. Mientras el texto esté seleccionado, escoge una tipografía escogiendo Texto > 
Texto y tipografía. Selecciona Bitstream Vera Sans o cualquier otra tipografía que 
quieras en la ventanilla llamada tipografía 



:J;j^'jj\inj ■.i'lujú j.-r^irl-rTj 



Familia de tipografía 



ARPLUMmgTWMBE 
Bitstream Charter 
Bitstream Vera Sans 
Bitstream Vera Sans Mi 



Bitstream Vera Serif 




Sistemas Reticulares 



Qc 



5. El tamaño del texto puede ser editado al escribir el número dentro de la caja de 
Tamaño de tipografía, o escalándola con la herramienta de selección. Para escalar 
el texto, haz clic en cualquiera de las flechas de transformación en las esquinas del 
objeto de texto seleccionado y arrástralas hacia el centro (para reducir el tamaño) o 
lejos del centro (para aumentar el tamaño), recuerda mantener presionada la tecla 
Control. En Esta ejercicio, el tamaño del titular es de 44 puntos. 



Tipografía ¡Texto 
Familia de tipografías Estilo 



AKPLUMing I' 
ARPLUMingTWM 
Bit'itr-rSITl :~l~iai~t-ri 



Bitítr^am Vera Sa 
Bitstream Vera Sa 

Bitstream Vera Se i — ■ 

Je-tiponrafía: 44 



Normal 
vI:Ií:|Ut 

Bol d 

Bold Oblique 



Espaciado de líneas: 



H 



Sistemas Reticulares 



\ Definir como predeterminado 
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6. Usa la herramienta de selección para agarrar el titular y muévelo de manera que 
la base del texto coincida con la línea negra y la S de sistemas se encuentra a la 
derecha de la guía vertical. 

7. Kerning es el espacio entre las letras en una palabra. Cuando estableces el 
cuerpo del contenido, usualmente no tienes que preocuparte por el kerning. Las 
fuentes digitales son creadas para tener un buen Kerning en opciones pequeñas 
de tipografía (por ejemplo 10 - 12 puntos). Sin embargo, cuando se trabaja con 
un texto a escala mayor, como lo es un titular de 44 puntos, el kerning debe ser 
estudiado. Tradicionalmente, la cantidad de espacio entre cada letra debería ser 
uniforme . 

En Esta ejercicio, ajustaremos el espacio entre la "t" y la "i" en "Reticulares", al 
igual que la "t" y la "e" en "Sistemas". Resalta la letra en Reticulares. Haz clic 
cuando veas que el cursor se ve como una línea de manera que puedas editar la 
palabra. 

¡Atención! si accidentalmente haces clic cuando la herramienta de texto se ve 
como una T con una caja punteada alrededor, harás un nuevo objeto de texto. Usa 
la herramienta de selección para seleccionar este objeto, y luego presiona la tecla 
Delete. 

Una vez que la herramienta de texto se encuentre entre la "t" y la "i", presiona 
la tecla Option + la tecla de las flechas en el teclado, hacia la derecha o hacia la 
izquierda. Esta es el método de ajustar manualmente el espacio entre caracteres en 
Inkscape. Repita este proceso para s/t en Sistemas. 

Ejercicio 4: Creando el contenido del cuerpo 
con la herramienta de texto 

El contenido del cuerpo, es el contenido del artículo, un capítulo en un libro, un 
ensayo o una página web, y demás ejemplos. El contenido debería estar estab- 
lecido dentro de una caja de texto en Inkscape. Como normalmente el contenido 
se estructura en rectángulos, considera la forma general del texto para crear una 
forma rectangular en la página. Utilizando el sistema de retículas, la producción 
del artista controla cuántas columnas de texto aparecerán en la propuesta final. 

El artista deberá estar interesado en crear un contenido legible. Un cuerpo legible 
no es muy grande, muy pequeño, muy largo, muy corto, muy claro o muy oscuro. 
Para un tamaño considerable de contenido (un artículo completo, por ejemplo), el 
contenido debería estar establecido en una columna de 3 .5 a 4 pulgadas de largo 
o 35 a 65 caracteres. Este es el punto en el que muchos lectores empiezan a leer 
palabras que ya han leído, en vez de re-leer las mismas palabras, un contenido de 
3 .5 pulgadas anima al lector a moverse a la próxima línea de texto al tiempo en que 
está listo para mover los ojos de derecha a izquierda. 
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Evaluar el cuerpo del contenido es sencillo; entre cierra los ojos mientras vez el 
campo de texto. La escala de grises general del rectángulo del texto debería ser de 
un 40% - 50%. No debería ser leído como tiras de negro contra la página. En este 
ejercicio, consideraremos los ajustes que pueden hacerse si el texto es muy claro o 
muy oscuro. 

¡Atención! si el producto final va a ser impreso, el diseñador deberá tomarse el 
tiempo de evaluar la composición de la versión impresa. Es increíblemente difícil 
de evaluar la tipografía en la versión digital del trabajo. 

1. Crea una nueva guía vertical al final de la letra S en reticulares. 

2. La herramienta de texto creara una caja de texto cuando hagas clic y arrastres el 
ratón con la herramienta de texto, en lugar de hacer clic una vez y escribir el texto. 
Crea una caja de texto de aproximadamente 7.25 pulgadas (verticalmente), entre 
dos guías verticales. Puedes colocar una guía en 7.25 pulgadas. 

En el ejemplo hemos usado un párrafo con texto en latín como ejemplo, un texto 
que diseñadores gráficos han utilizado desde los años 1500. El texto empieza con 
las palabras Lorem ipsum, y normalmente la gente se refiere a Esta texto como el 
"Loren ipsum" (por ejemplo: "coloca un Loren ipsum ahí por ahora, deberíamos 
estar recibiendo el contenido en breve"). Lorem ipsum es usado como un pará- 
metro de texto, cuando el contenido no está disponible, ya que las letras dentro del 
Loren ipsum se encuentran distribuidas de manera uniforme. Mirar un "aquí irá 
el texto, aquí irá el texto" repetidamente en el área de texto para crear contenido, 
hace que la atención se centre en las palabras repetidas, ya que terminan formando 
un patrón. Mientras escribíamos este libro, lipsum.com ofrece Lorem ipsum por 
número de palabras, número de párrafos y número de bytes. Incluido en el disco, 
está el texto Lorem ipsum utilizado aquí, pero si tienes acceso a Internet y si lip- 
sum.com se encuentra todavía activo, deberías generar dos párrafos de texto. 

3. Copia y pega varios párrafos de texto Lorem ipsum generado en lipsum.com a tu 
nueva caja de texto. Nosotros usamos Bitstream Vera Sans en 11 puntos para este 
ejercicio. 

4. El texto copiado en la nueva caja de texto debería estar justifica hacia la izquier- 
da por descarte; pero si Esta no es el caso, selecciona Texto > Texto y Tipografía y 
haz clic en el botón alinear líneas a la izquierda. Esta línea se extiende al titular, ya 
que esta alineado con la S de Sistemas. Por la propiedad de continuidad, se hace 
una línea desde la S hasta el texto en la página. Mientras esta "línea" es creada por 
el margen izquierdo, no es literal ni pesada como la línea negra hecha en el ejer- 
cicio 2, es sólo relevante para la propuesta, ya que provee una intersección con la 
línea negra, definiendo la retícula en la página. 
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5. El leading es el espaciado entre líneas. El texto del contenido está establecido 
en 11 puntos, y el espacio entre líneas en 15.2 puntos. Esto es tradicionalmente 
referido a 11/15.2. Inserta la herramienta de texto en cualquier lugar del texto y 
presiona Control+A en el teclado para seleccionar todo el texto en la caja de texto. 
Con todo el texto seleccionado, selecciona Texto > Texto y Tipografía. Bajo la 
pestanilla de Tipografía, selecciona Espaciado de líneas. En las dos siguientes 
imágenes, es espacio entre líneas ha sido ajustado y la caja de texto ha sido modi- 
ficada en tamaño en consideración con el espacio de margen a la derecha y en la 
parte inferior de la composición. Nota como abriendo o aligerando el espacio entre 
líneas, crea una escala de grises un poco más clara cuando entrecierras tus ojos y 
ves el bloque de texto. 



Ejercicio 5: Usando color para dirigir 
al espectador 



En este ejercicio, el punto sobre la "i" será reemplazado con un cuadrado rojo. Un 
cuadrado rojo sera ubicado también en la parte inferior de la composición, cerca 
del comienzo del contenido. Al repetir esta forma en dos lugares de la página, la 
relación es hecha entre el titular y el contenido. El rojo es usado intencionalmente 
para empujar la vista del espectador del titular al contenido. 

1 . Para crear un punto focal en el titular, reemplaza el punto de la "i" en "Sistemas" 
con un cuadrado rojo. Remover parte de una letra es sencillo, pero la letra debe ser 
transformada primero de una línea de texto editable a un grupo de formas. Antes 
de hacer esto, hay que aclarar que hacer transformar un texto en líneas de dibujo, 
aniquilara cualquier posibilidad de edición en el objeto de texto. Cuando se crean 
líneas de dibujo alrededor de una pieza de texto, es recomendable duplicar el texto 
y dejarlo en algún lugar del área de trabajo fuera del área de la página para tenerlo 
de referencia y posibles para ediciones posteriores. 

Con la herramienta de selección, haz clic en la palabra "Sistemas Reticulares", 
luego selecciona Editar > Copiar, seguido de Editar > Pegar. Arrastra la copia du- 
plicada del texto fuera del área de la página. Selecciona el texto "Sistemas Reticu- 
lares" original en el área de la página, y haz clic en Trazo > Objeto a trayecto. 

Luego de seleccionar "Objeto a trayecto" el texto se agrupará, de manera que cada 
letra se moverá o será transformada como un grupo. 

3. Usa la herramienta de nodos para borrar en punto sobre la i. Los nodos se 
mostrarán como pequeños diamantes grises o cuadrados cuando selecciones le her- 
ramienta de nodos; se convertirán en rojo cuando pases sobre ellos y azul cuando 
hagas clic en ellos. Selecciona los nodos del punto y bórralos presionando la tecla 
Delete en el teclado. Acercarse a la tipografía aumentará la probabilidad de ver 
estos detalles la primera vez que lo hagas, así que no temas en usar la herramienta 
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de Zoom o las teclas Más (+) y Menos (-). 

4. Crea un cuadrado en el lugar del punto con la herramienta de rectángulo; manten 
presionada la tecla Control mientras arrastras el ratón, de manera que la herra- 
mienta cree un cuadrado en lugar de un rectángulo. Cambia el color de relleno a 
un tono de rojo que escojas. 




5. Duplica el cuadrado y muévelo a la parte inferior de la composición, justo 
encima de la primera palabra en el la caja de texto con el contenido, usando la 
herramienta de selección y manteniendo la tecla Control presionada mientras lo 
arrastras. 

6. Mientras mantengas la copia del cuadrado seleccionada, ve a Ancho (W) y Al- 
tura (H), en el panel de control de herramientas y escala sus valores a un 300%. 
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7. Finalmente, coloca el cuadrado rojo en la parte superior del contenido, hacia la 
guía derecha. 

Ejercicio 6: Ajustando formas con la herra- 
mienta de edición de nodos 



1 . Haz clic en el nodo superior izquierdo de la "t" en "Sistemas" con la herramien- 
ta de nodos. Nota como se convierten en rojo a medida que pasa por encima de 
un nodo con la herramienta. Haz clic en el nodo superior izquierdo en la "t" para 
seleccionarlo, se pondrá de color azul. Presiona la tecla Shift y haz clic en el nodo 
superior derecho en la "t" de "Sistemas" para agregarlo a la selección. 

2. Con sólo los dos puntos de arriba seleccionados de la letra t, expandiremos el 
tamaño del ascendente de la t usando la tecla de flecha. En Esta ejercicio, pres- 
ionamos la tecla de la flecha hacia arriba mientras presionamos la teclas Shift, seis 
veces. 
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Teoría del Color y Formas Básicas 

El color siempre ha estado presente en nuestro ambiente natural y alrededor del 
mundo. Desde los dibujos de la cueva Chauvet-Pont-d' Are, al sur este de Francia, 
donde los creadores usaron carbón negro y pigmentos ocre para representar ca- 
ballos Paleolíticos, al Desfile del Torneo de las Rosas el primero de Enero de 1954; 
la primera transmisión a color en televisión en Estados Unidos. El color ha sido un 
enfoque en la creación artística. 

Artistas, matemáticos y científicos han desarrollado teorías de color desde el siglo 
17. Las teorías del color, normalmente, son un compendio en lo que se refiere al 
modelo de color. Los educadores de la escuela Bauhaus Alemana, Josef Alberts 
y Johannes Itten, ayudaron a definir y expandir el modelo de color sobre el RYB 
(clasificación de colores R=Red, Y=Yellow, B=Blue; rojo, amarilloy azul), en los 
años 1919-1923. Albers creo un curso en teoría del color que es inspiración para el 
tutorial de éste capítulo. Estudiantes Universitarios de arte y diseño, normalmente 
completan estos estudios de teorías del color usando pigmentos y pinceles, o ca- 
tálogos de referencia de color. Sin embargo, estudios formales de color pueden ser 
ejecutados en el ambiente digital. En los siguientes cuatro ejercicios, matiz, valor 
y contraste son explotados para lograr varias relaciones de color. 

El tradicional círculo cromático análogo, utiliza el modelo RYB. En este modelo 
de color, rojo, amarillo y azul son los matices primarios (lo que pensamos como 
colores), los cuales pueden ser mezclados para crear otro color en el círculo. Los 
colores complementarios son los opuestos, mientras que los colores similares 
están ubicados uno al lado del otro en el círculo. Una superficie parece coloreada 
porque refleja algunas frecuencias de luz mientras que absorbe otras. Cuando los 
primarios puros se mezclan en un sistema sustractivo, el resultado final es negro, 
porque los colores absorben la luz, sin dejar luz alguna para reflejar de vuelta al ojo 
y expresar color. 




Título de la imagen: Farbkreis, Johannes Itten, 1921 . 
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Normalmente encontramos medio digitales como una proyección de luz o como un 
impreso hecho con tinta. El arte podrá ser proyectado en una pantalla o montado 
en un artefacto electrónico como un iPod, o puede ser impreso en una imprenta 
a cuatro colores. Existen diferentes modelos de cromáticos, dependiendo del 
propósito. 

El modelo cromático CMYK (cyan, magenta, amarillo y negro), fue creado es- 
pecialmente para la industria de impresos. Artistas y diseñadores con frecuencia 
crean trabajos para ser impresos en grandes cantidades usando el modelo cromático 
CMYK, de ésta manera, pueden sincronizar el archivo digital con las cuatro tintas 
correspondientes a los colores. Aunque es trabajado en herramientas digitales y 
examinado a través de la luz proyectada por la pantalla de la computadora, este 
sistema, es también sustractivo; al superponer las tintas, se obtiene un matiz de 
color más oscuro. 




Las pantallas de la televisión o el computador no usan tinta o pintura; usan luz roja, 
verde y azul. RGB (rojo, verde y azul), es un modelo cromático aditivo. Luz de 
colores es mezclada para crear matices y valores con rojo, verde y azul como colo- 
res primarios. Cuando los colores primarios en RGB son mezclados, el resultado 
es blanco. 
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Título: Círculo cromático RGB 



Vocabulario: 



Matiz es color (por ejemplo rojo, azul, verde, amarillo) 
Intensidad, Saturación, y Brillo, se refieren a cuánto pigmento hay en un 
color, que se traduce a que tan vivido se ve el color. 
Luminosidad, es medido con respecto a la cantidad de blanco o negro 
mezclado en un matiz, o puede ser registrado como la escala de gris cor- 
respondiente al color. 
Sombra es el matiz mezclado con negro. 
Tinta es el matiz mezclado con blanco 

Análogos, son aquellos colores que tienen un tinte en común, y se encuen- 
tran uno al lado del otro. 
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Homenaje al Cuadrado, Joseph Albers, 1950-1975. 

Estampilla con el Homenaje al Cuadrado, Joseph Albers, 1950-1975. 
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Colores análogos son demostrados en esta estampilla. Albers 

Esta estampilla muestra los colores análogos. Albers comenzó a trabajar en esta 
serie en 1950 e hizo alrededor de mil trabajos dirigidos al cuadrado en un período 
de 25 años. Los colores complementarios están dispuestos de manera opuesta el 
uno al otro en el círculo cromático. 




Retrato de Madame Manet en un Sofá Azul, Edouard Manet, 1880, óleo sobre 
lenzo. 

Los colores complementarios son usados en la pintura de Manet par crear un 
contraste entre el azul del sofá y el naranja de la pared de fondo. Los colores de la 
ropa de Madame Manet son neutrales, creando armonía entre ella y el sofá. 

Avance: Esto es lo que harás en los ejercicios siguientes 



I 




Resultados de los ejercicios 1 , 2 (arriba), 3 y 4 (abajo, de izquierda a derecha). 



Avance: Esto es lo que harás en los ejercicios siguientes 
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Ejercicio 1: El matiz tiene un valor 

1 . Crea un nuevo documento (Shift+Control+D) en Inkscape con orientación hori- 
zontal. 



Wuplüikidaa -Jal tliia¿uiia«iia-tMa/¡l3.->gifl-i-Li, H[BlfH1 



Propiedades del documento (Mayús.+Ctrl+D) 

Página Guías Rejillas Ajustar Puntos de ajuste 
General 



Unidades predet,: px 



Color de fondo: MtoMítoK 



Tamaña del papel 



A4 

US Letter 
US Legal 
US Executive 

Orientación del papel: 

Tamaño personalizado 

px 



210,0 X 297,0 mm 


h 


8,5 X 11,0 in 
8,5 X 14,0 in 
7,2 X 10,5 in 


Id 
- 






O Vertical c» l onzortal 



Ancho: |990,00 




Altura: |765,00 



> 



Ajustar la página a la selección 



Borde 

El Mostrar borde del papel 
□ Borde encima del dibujo 
El Mostrar sombra del papel 

Color del borde: 



2. Usando la herramienta de Rectángulos y Cuadrados (F4), dibuja cinco cuadra- 
dos en el área de trabajo. Presiona la tecla Control mientras creas cada uno de los 
cuadrados para mantener la misma proporción. 

3. Por cada cuadrado, escoge un color de relleno con un matiz de diferentes va- 
lores. Arrastra el color deseado desde la paleta de colores en la parte inferior de 
la pantalla hacia la figura. No utilices un borde. Revisa el diálogo de Rellenos y 
Bordes (Shift+Control+F). Haz clic en la ventanilla de bordes, y asegura que la X 
esté seleccionada, de manera que no hay un borde. 
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4. Selecciona todas las figuras rodeándolas con la herramienta de Selección (Fl), 
o manten presionado Shift y haz clic en cada figura con la herramienta de Selec- 
ción. Presiona Control+D para duplicar el grupo. El grupo duplicado es colocado 
directamente sobre el original. Manten presionada la tecla Control, y arrastra el 
grupo de figuras hacia abajo. La copia duplicada solo ser moverá en línea recta 
debido a que la tecla Control está presionada. 




[^Relleno y borde (Mayus.+Ctrl+F) 
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5. Selecciona uno de los cuadrados duplicados con la herramienta de Selección. 
Ve al menú de la parte superior, y haz clic en Efectos > Color > Escala de Grises. 
Esto remueve el matiz del cuadrado y muestra el resultado del valor o la luminosi- 
dad de esa tinta. Repite éste paso por cada cuadrado en el grupo duplicado. 




Rectángulo en 



6. Para observar la luminosidad (L) de cada forma, ve a la ventan de Rellenos y 
Bordes (Shift+Control+F). Haz clic en la pestanilla Relleno, y bajo HSL, con- 
seguirás el valor numérico de la luminosidad en la parte (L). 



Ejercicio 1 : El matiz tiene un valor 
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^Relleno y borde (Mayús.+Ctrl+F) 
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7. Reorganiza los pares de color-escala de grises de acuerdo al valor de la escala de 
grises, con el más cercano a blanco hacia la derecha, y el más cercano a negro a la 
izquierda. Selecciona cada par (bien sea rodeándolos con la herramienta de Selec- 
ción o haciendo clic en cada uno de ellos con la tecla Shift presionada) , y muévelos 
hacia la derecha o izquierda en el orden correcto de escala de grises. Asegura de 
presionar la tecla Control, una vez que comiences a mover el ratón, de ésta manera, 
la selección se moverá estrictamente horizontal o verticalmente. 
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Ejercicio 2: ¿Arriba o Abajo? 



1 . Crea un archivo nuevo en Inkscape. 

2. Usa una guía para separar la página en dos mitades (arriba y abajo). Posiciona 
el ratón en la regla superior y crea una nueva guía haciendo clic y arrastrándolo 
hacia abajo. Las guías son creadas al hacer clic en una regla y arrastrándola hacia 
el área de trabajo. Haz doble clic en la guía para ver la ventan de información de 
esa guía. Cambia el valor de Y a 4.25 . Ésto debería centrar la guía y dividir la 
página a la mitad horizontalmente. Luego crea una nueva guía haciendo clic y ar- 
rastrando desde la regla de la izquierda hacia la página (como si estuvieras sacando 
una guía de la regla de la izquierda). Haz doble clic en la guía para ver el diálogo 
de información de ésta guía. Ésta vez, cambia el valor de X a 5.5. Ahora las dos 
guías dividen la página en cuatro cuadrantes iguales. 
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3 . Crea un cuadrado de 2 x 2" horizontal centrado en la mitad superior de la página 
alineando la parte inferior del cuadrado con la línea horizontal que divide la pá- 
gina. Para hacer el cuadrado exactamente de 2 x 2", dibuja un cuadrado cualquiera 
en cualquier parte de la página con la herramienta de Rectángulos y Cuadrados. 
Una vez creado el cuadrado, la segunda fila de herramientas en la parte superior de 
la interfaz es usada para alterar objetos numéricamente. Antes de que cambies el 
ancho y alto, haz clic en la flecha de la derecha antes antes de las propiedades de 
Relleno y Trazo, y cambia las unidades a pulgadas. Luego cambia el ancho (W) 
y alto (H) del cuadrado a 2. Ahora con la herramienta de Selección, selecciona el 
cuadrado, muévelo a la posición indicada. Debería posicionarse de manera casi 
automática a la guía. 



Cambio: W ¡2.000 Q H: 1 2.000 | 




Usando el diálogo de opciones de Relleno y Borde. 
Ejercicio 2: ¿Arriba o Abajo? 
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4. Los colores tienen tres propiedades; matiz, luminosidad y saturación. El matiz 
es el nombre usado para definir el color, por ejemplo, rojo, amarillo, azul, y así 
sucesivamente, son matices. La luminosidad se refiere a cuanto blanco y negro es- 
tán mezclados en el color. Azul bebé tiene blanco en él, mientras que azul marino, 
tiene un valor mayor de negro. La saturación, es el nivel de intensidad del color, 
el color de los tomates pálidos del invierno es menos saturado que el color de los 
tomates maduros en verano. 

Haz doble clic en el color de relleno en la barra de herramientas de la parte poste- 
rior, o presiona Shift+Control+F. Aparecerá el diálogo de propiedades del color de 
relleno y borde -ésta es otra manera de seleccionar colores. El diálogo de propie- 
dades de relleno y borde tiene control para las tres propiedades; matiz, luminosi- 
dad y saturación. Selecciona Matiz (H) en la parte superior, luego selecciona una 
luminosidad moviendo las flechas hacia la derecha en Luminosidad (L). Mien- 
tras más hacia la derecha muevas las flechas, menor el valor, y el color será más 
oscuro. Selecciona Saturación (S) moviendo las flechas de derecha a izquierda, 
mientras más hacia la izquierda, menor la saturación. El color se va convirtiendo 
en gris. Mientras más hacia la derecha, mayor será el valor de saturación y el color 
se pondrá más intenso. 

5 . Asegúrate que el cuadrado esté seleccionado antes de escoger un color en éste 
paso. Usa el diálogo de propiedades de Relleno y Línea para escogre un matiz 
con una luninosidad baja para rellenar el cuadrado. No asignes ningún borde a la 
figura. 



* 



Relleno y borde (Mayús.+Ctrl+F) 
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6. Con la tecla espaciadora presionada, haz clic en el cuadrado y arrástralo hacia la 
izquierda para hacer una copia. Si presionas la tecla Control una vez que empieces 
a mover el cuadrado, éste, mantendrá su movimiento a lo largo del eje X. 

7. Repite ésta acción para hacer una copia del cuadrado a la derecha. 
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8. Selecciona los tres cuadrados, con la tecla espadadora seleccionada, haz clic y 
arrástralos hacia abajo, desplazándolos a la derecha, de ésta manera, la izquierda 
superior izquierda del nuevo cuadrado se sobrepondrá con la esquina inferior dere- 
cha del cuadrado original. 




9. Con los tres nuevos cuadrados seleccionados, asígnales un nuevo tono, con un 
valor superior al de los cuadrados de la parte superior. Una vez hecho ésto, asigna 
también un valor de luminosidad de manera que el color tengo menos negro en él. 



rrr 



10. Selecciona el grupo izquierdo de cuadrados (rodéalos con la herramienta de 
selección, o haz clic en uno y lugo Shift+clic en el segundo con la herramienta de 
selección). 

11. Duplica los dos objetos seleccionados usando Control+D. Con los dos cuadra- 
dos seleccionados, selecciona Trazo > Intersección (Control+*). La intersección 
entre las dos figuras crea un nuevo objeto en el área donde los objetos se superpo- 
nen. 



Ejercicio 2: ¿Arriba o Abajo? 
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12. Repita los pasos 10 y 11 con el grupo de cuadrados del centro y de la derecha. 

Creando un primero plano y fondo usando tono y valor 

Ahora modificaremos el color de los cuadrados del medio, empezando por el 
cuadrado de la izquierda. El propósito de éste ejercicio es ver como el tono y el 
valor pueden ser utilizados para crear espacio o profundidad en un campo de color. 
Crearas colores para crear un efecto de adelante o atrás en el cuadrado del medio. 
Verás como el grupo de cuadrados del centro pueden ser llevados hacia atrás en el 
espacio, en relación con los otros cuadrados. 

1 . Para el primero grupo de cuadrados a la izquierda, modifica cuadrado del centro 
de manera que sea parte del cuadrado superior, flotando sobre el cuadrado inferior. 
Para lograr ésto, selecciona un tono y un valor que cree un contraste fuerte con el 
cuadrado inferior (ésto será más obvio en los límites de las dos formas) , y poco o 
ningún contraste en el valor del cuadrado superior. 

2. Para el grupo del centro de cuadrado, modifica el cuadrado del centro de manera 
que flote sobre los dos cuadrados más grandes. Para lograr ésto, selecciona un 
tono y valor que cree un fuerte contraste con los dos otros cuadrados. 

3. Para el tercer grupo de cuadrados, el de la derecha, modifica que cuadrado del 
centro de manera que sea parte del cuadrado inferior, y ambos estén flotando sobre 
el cuadrado superior. Para lograr ésto, selecciona un tono y valor que cree un con- 
traste fuerte con el cuadrado superior, y poco o ningún contraste con el cuadrado 
inferior. 
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Ejercicio 3: Interacción de valores 

1 . Crea un documento nuevo con orientación horizontal. 

2. Usa la herramienta de cuadrados y creo un rectángulo del tamaño de la página, 
y asígnlae un color de 20% de gris; usa los cursores de la ventana de Relleno y 
Bordes para establecer el valor del negro (K) en la pestanilla de CMYK a 20% y 
las otras a 0%. 

3. Abre el diálogo de capas seleccionado Capa > Capas o con Shift+Control+L. 
La forma gris que acabas de crear debería estar ubicada en el Layer 1 . Bloquea 
la capa haciendo clic en el icono del candado, de manera que la forma gris no se 
mueva mientras haces los pasos siguientes. 

4. Crea una nueva capa haciend clic en el botón "+" de el diálogo de capas. Nom- 
bra la nueva capa, Layer 2. 
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5. Con el Layer 1 bloqueado y el Layer dos seleccionado o resaltado en el diálogo 
de capas, los pasos siguientes, serán realizados en el Layer 2. 

6. Crea dos 3" x 3" cuadrados en la parte superior del fondo gris. Rellena uno en 
blanco, elimina cualquier tipo de color de borde, y rellena el otro en negro. Ubica 
los dos cuadrados lado a lado, de manera que el borde iquierdo de uno toque el 
borde derecho del otro en medio del fondo gris. 



Ejercicio 3: Interacción de valores 
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7. Crea un cuadrado de .75" x .75" en el centro de cuadarado blanco. Rellénalo de 
un color gris medio, que equivale a un 50% de gris. 

8. Con la tecla espadadora presionada, haz clic y arratra éste cuadrado para copi- 
arlo en el centro del cuadrado negro con la herramienta de selección (Fl). 




Nota como el gris medio dentro de las áreas blanca y negra, parecen tener un 
valor diferente. Cuando los valores son colocados cerca o encima uno del otro, 
percibimos sus valores como interactuando y afectando uno al otro. Es impor- 
tante tomar ésto en cueta cuando seleccionamos combinaciones de tono y valores, 
debido a que uno siempre influenciará la apare ncia del otro. 
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Ejercicio 4: Interacción de tonos 

Ahora, un truco de magia: en los próximos ejercicios tres colores aparecerán como 
cuatro colores. 

1 . Salva de nuevo el archivo del Ejercicio 3 con un nuevo nombre, usando Ar- 
chivo > Guardar Como. 

2. Haz clic mientras presionas la tecla Shift, para seleccionar los dos cuadrado 
pequeños y usa el diálogo de Rellenos y Bordes para asignarle el mismo tono. 




3. Selecciona el cuadrado más grande del lado izquierdo (en éste ejemplo, el 
cuadrado blanco es el seleccionado) y asígnale un valor medio y un tono comple- 
mentario al tono que acabas de seleccionar para el cuadrado más pequeño. Puedes 
usar el diálogo de Rellenos y Bordes o la paleta de colores. 

4. Selecciona el cuadrado más grande del lado derecho (en éste ejemplo, el cuadra- 
do negro), y asígnale un tono similar al tono del cuadrado más pequeño (verde, en 
nuestro caso) con un valor medio de gris. Nosotros usamos el diálogo de Rellnos 

y Bordes para seleccionar un tono similar, mira la captura de pantalla para aclarar 
éste paso. 



Ejercicio 4: Interacción de tonos 
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5. Nota que los dos cuadrados pequeños paracieran de diferentes colores. De 
hecho son del mismo color, pero la presencia de un complementario y un similar 
influyen en nuestra percepción. El complementario enfatizar la percepción de los 
tonos, y el similar sustrae la percepción de los tonos. El cuadrado verde del centro 
del cuadrado grande de la derecha, parece menos saturado que el del cuadrado azul 
a la izquierda. 
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Ejercicio 4: Interacción de tonos 67 



Líneas y Gráficos Planos 

Sin importar el peso de la línea, desde un fino grabado a un marcador grueso, o una 
pincelada, los trabajos artísticos hechos con líneas, son binarios: el color está en el 
papel o no está. Los trabajos hechos con líneas, usan colores sólidos, y no incluye 
una escala tonal continua. El titular de un periódico, por ejemplo, es hecho a base 
de líneas, pero la fotografía debajo del titular, no lo es. Las líneas y figuras de una 
composición forman una figura-fondo predominantes y una interacción entre el 
espacio negativo y el positivo. 

El uso de líneas en trabajos artísticos comenzó a usarse rutinariamente en el área 
comercial (Harper Bazar de 1868, es una buena referencia visual del uso de líneas). 
Andy Warhol, hizo borrosos los límites que dividían al mundo comercial y al 
mundo del arte con el uso de líneas y gráficos planos en pinturas que eran mostra- 
das en galerías y museos como crítica del mundo comercial al cual éste género 
sirve. Las ilustraciones de Warhol de las sopas Campbell son líneas negras, finas, 
que delinean los bordes superiores de la lata y una área grande de rojo-naranja en 
la etiqueta. 

Plakatstil es el estilo gráfico original usado en publicidad y carteles publicitarios 
(mira el cartel de Jim Fitzpatrick de 1968, del Che Guevara). Plakatstil, traducido 
del alemán, significa "estilo de cartel". Plakatstil es lo opuesto a decoración, y está 
compuesto de gráficos planos llamativos y mínimos, y tipografía en gran tamaño 
nomalmente. El primer trabajo gráfico en adoptar éste estilo gráfico, fue un cartel 
hecho por Lucían Bernhard en 1906 para un concurso en Berlín por la Compañía 
Priester Match. Bernard se inspiró en la industrialización de la vida de la ciudad 
y el deseo de una comunicación más rápida. En carteles como el de Bernhard o el 
póster de Jim Fitzpatrick del Che Guevara, la paleta de color es mínima, el con- 
traste entre formas, valores y la intensidad es extrema. Como resultado, el mensaje 
es llamativo y fuerte. 

Aunque los dibujos de línea y planos gráficos son a menudo vistos en logotipos 
y piezas de identidad comercial, el resultado de dibujar una simple línea es tan 
personal como la firma. Artistas como Pablo Picasso y Egon Schiele (véase Capí- 
tulo 1) son con frecuencia identificados por la calidad de la línea en sus trabajos. 
Vuelve a ver un trabajo de Schiele y nota como el contraste puede ser logrado me- 
diante la yuxtaposición de líneas sólidas e implícitas, así como líneas de espesores 
varios 



68 Líneas y Gráficos Planos 
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La longitud adecuada en las faldas para niñas de diferentes edades, un diagrama 
de Harper's Bazar, 1868, "muestra una idea de mediados de la era Victoriana en 
como el dobladillo o ruedo debe descender ligeramente bajo la rodilla para una 
niña de 4 años, y cerca del tobillo para una niña de 16" . 
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En éste cartel político del Che Guevara por Jim Fitzpatrick (1968), el retrato es 
representado como un plano gráfico. El contraste entre el rojo vibrante, negro y 
el papel blanco es intenso. El mensaje es entendido rápidamente a través de un 
diseño que es minimalista y poderoso al mismo tiempo. 

La Pluma 

La Pluma (Bezier), es usada con frecuencia para crear planos gráficos o líneas de 
arte. Puede ser usado para hacer formas complejas, trazando imágenes y combi- 
nando formas simples. Además de contornear y trazar, ésta herramienta es uti- 
lizada con frecuencia para crear formas que serán usadas luego como máscaras. 
La Pluma, puede ser un poco difícil de aprender, ya que el proceso para usar ésta 
herramienta puede sentirse que va en contra de la intuición. El artista debe saber 
donde colocar el siguiente punto antes de trazarlo. Visualizar líneas, formas y 
espacio antes de que realmente existan, puede ser un reto. En este ejercicio, la bro- 
cha es utilizada para crear un dibujos de gesto rápido de líneas y formas que serán 
recreadas de manera exacta con la Pluma para eliminar el tipo de previsión que 
acompaña a ésta herramienta. Con suficiente práctica sobre la capa usada como 
plantilla, novatos pueden asegurarse de desarrollar intuición al usar la Pluma. 

Ejercicio 1: Dibujos gestuales en una 
capa de plantilla 



1. Comienza un nuevo documento en Inkscape, y establece el tamaño a Letter. 

2. Para empezar, crearemos una plantilla de manera rápida, usando trazos gestuales 
con la Pluma. Selecciona la herramienta de pluma, haz haz clic y arrastra el ratón 
para dibujar una línea recta lo mejor que puedas. 

Tecla Comando: Otra forma para anular la selección de un objeto en Ink- 
scape es pulsar la tecla Esc. 

3. Dibuja un triángulo con la Pluma. Los resultados de los dibujos hechos son 
figuras vectoriales. 

4. Dibuja las curvas restantes ilustradas en nuestra captura de pantalla. 



70 La Pluma 
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5. Abre el diálogo de las capas (Capa > Capas). Haz haz clic en el icono de la cer- 
radura a la izquierda de la palabra "Capa 1" para bloquear la capa, de modo que no 
modifiques accidentalmente el trabajo. Fija la opacidad de la capa 1 a el 30%. 



Capas (Mayús.+Ctrl+L) 
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& á ■ Capa 1 



Modo de mezcla:: 

Opacidad, % 
IjLl 



Normal 



30,0 



6. Crea una nueva capa llamada "Capa 2" en el diálogo de las capas haciendo haz 
clic en el botón Crear una capa nueva, que tiene el símbolo más (+). Utilizaremos 
la herramienta de la Pluma en la capa 2. 



Ejercicio 1 : Dibujos gestuales en una capa de plantilla 
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Ejercicio 2: Reconstrucción de líneas rectas 
con la Pluma 

1 . Selecciona la herramienta del Lápiz en la barra de herramientas. Nota que al 
pasar el ratón sobre la herramienta, dice "dibujar curvas Bezier y líneas rectas." 
La Pluma traza puntos de anclaje cada vez que haces haz clic con el ratón. Para 
hacer una línea recta, haz haz clic una vez al principio de la línea, arrastra el ratón, 
muévelo al extremo de la línea, y haz haz clic de nuevo. Pulsa la tecla Enter para 
terminar. Con dos haz clics, la Pluma crea dos puntos de anclaje y ensambla los 
puntos con una línea recta. 

2. Para hacer las líneas dibujadas con la Pluma en rojo, Selecciona la línea que 
acabas de dibujar usando la herramienta de selección. Abre el diálogo de Relleno y 
borde, seleccionando Objeto > Relleno y borde y cambia el color de la línea a rojo. 
Asegúrate que color de relleno esté fijado a "Sin pintura" (X). 




3. Una vez que la línea esté hecha, puede ser modificada con la herramienta de 
selección para moverla, girarla, o transformarla, o por la herramienta del nodo para 
modificar un nodo (o el punto de anclaje) a la vez. Usando la herramienta del nodo, 
haz haz clic una vez en la línea para ver sus nodos, luego haz haz clic en el nodo al 
final de la línea y arrástralo para aumentar la longitud de la línea. 




Mire esto: En Inkscape, los nodos se hacen rojos cuando al pasar el ratón sobre el- 
los, de ésta manera, es más sencillo encontrarlos sin tener nada seleccionado. 

4. Utiliza la herramienta de Selección para seleccionar la línea y cambiar el peso 
del trazo que usando el diálogo de Relleno y borde. Nota como la línea puede ser 
fuerte y agresiva con un grosor de trazo mayor o delgada y ligera con un grosor de 
línea menor a 1 punto. 



Q ° 

Parte A: Reconstruye el triángulo con la Pluma 
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1 . cambia a la Pluma. Haz haz clic una vez en una esquina del triángulo y suelta el 
ratón. Haz haz clic en la siguiente esquina del triángulo. Suelta el ratón. Haz haz 
clic en la tercera esquina del triángulo. Suelta el ratón. El cuarto haz clic debe ser 
exactamente donde el primer nodo fue hecho. 




Subtitulo de la imagen: Nota en esta imagen que la Pluma muestra un pequeño 
cuadrado donde el primer haz clic fue hecho, de ésta manera, muestra que la trazo 
hecha es cerrada y un objeto entero es hecho cuando el último haz clic con la 
Pluma es hecho directamente sobre el primer nodo. Ésto es conocido como "cerrar 
la trazo." Cuando una trazo es cerrada, o una forma es entera, es fácil llenarla de 
un color usando la herramienta del Selección y las gamas de colores. 



2. Selecciona el triángulo con la herramienta del Selección, si no se está ya selec- 
cionada. Haz haz clic con el botón derecho del ratón en el diálogo de Bordes y rel- 
lenos, en la parte inferior izquierda de la página, y selecciona "Intercambiar relleno 
y trazo" . 




Pulse o pulse v arrastre para ii 



Los colores del trazo y del relleno cambian lugares. En nuestro ejemplo, el trián- 
gulo llega a ser rojo sin borde, en comparación con un triángulo sin el relleno que 
se contornea en rojo. 



Ejercicio 2: Reconstrucción de líneas rectas con la Pluma 
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Parte B: Modifique los nodos usando la herramienta del nodo 

Sólo para practicar, utiliza la herramienta del nodo para modificar dos nodos a la 
vez. Haz haz clic en un nodo del triángulo. Presiona la tecla Shift y haz haz clic en 
un segundo nodo. En este momento, un lado entero está seleccionado. Arrastra el 
ratón para mover ambos nodos al mismo tiempo. Puedes hacer haz clic y arrastrar 
el ratón para mover estos puntos de anclaje, o puedes utilizar, abajo, las teclas de 
flechas izquierda, derecha, arriba y abajo en el teclado numérico. Presiona la tecla 
Shift mientras pulsas una tecla de flecha, de ésta manera, el nodo se mueve 10 
veces más rápido. También puedes colocar el ratón en el borde de una forma (en 
una línea entre dos nodos), hacer haz clic y arrastrar para cambiar la curvatura de 
ese borde particular. 

Parte C: Crea una segunda forma para agregar dimensionalidad 

1 . Comienza por crear un paralelogramo usando la Pluma. Traza el primer nodo 
cerca de la parte superior del primer triángulo. 

2. Utiliza el borde del primer triángulo como guía para visualizar la dimensionali- 
dad de esta nueva forma. Traza el segundo nodo para crear una línea paralela entre 
las dos formas. 

3. Fija el tercer nodo para que el área en el espacio retroceda, creando una perspec- 
tiva unificada entre las dos formas. 

4. Cierre la trazo usando su quinto haz clic del ratón para volver al primer punto de 
anclaje. Si la forma no es perfecta, puedes modificar los nodos individuales con la 
herramienta de Nodos. 
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Parte D: Perspectiva atmosférica 

Párate afuera de tu casa temprano por la mañana o en el crepúsculo y mira la calle 
hacia el horizonte. Los objetos que están más lejos parecen menos saturados que 
los que estén cerca. La perspectiva atmosférica demuestra el cambio perceptivo en 
la opacidad total de objetos mientras se alejan en el espacio. 

1. Selecciona el paralelogramo. Abra el diálogo del relleno y borde y llénalo del 
mismo color que usaste en el triángulo. 

2. Con el segundo triángulo seleccionado, cambia su opacidad a el 80% en el ven- 
tana del relleno y borde. 
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Las formas planas, básicas creadas con la Pluma se pueden combinar para crear 
formas complejas y espacios tridimensionales. 



Ejercicio 2: Reconstrucción de líneas rectas con la Pluma 
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Ejercicio 3: Curvas 



Parte A: Una curva 

1 . La primera curva es creada con dos puntos. El primer punto de anclaje es hecho 
al hacer haz clic y arrastrar el ratón levemente hacia arriba, tangente a la curva, 
para definir la dirección de la curva. No arrastres el ratón completamente hacia 
arriba, ésta herramienta no funciona como el lápiz o la brocha. Una vez hecho esto, 
suelta el ratón. 

¡Atención! Si fijas la Pluma con relleno y sin borde, la trazo se llena de color a 
medida que cada punto es creado. Esto puede ser confuso, incluso para profesion- 
ales, mientras se comienzan afijar los puntos de anclaje. 





2. Haz haz clic una vez en el extremo de la curva y arrastra levemente hacia abajo 
hasta que la curva se vea similar a la plantilla. No te preocupes si no es perfecta; 
en un momento la ajustaremos. Pulsa la tecla Enter para finalizar. 
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3. Termina la selección de la curva, presionando la tecla Esc. 

Parte B: Manijas de Bezier 

Consejo 

Cuando seleccionas la herramienta del nodo, una barra de herramientas 
aparece en la parte superior del área de trabajo. Usando los botones en 
esa barra de herramientas selecciona varias opciones, puedes agregar, 
borrar, enlazar, arrinconar, y realizar otras operaciones en curvas y 
líneas. Para borrar un nodo, puedes utilizar la opción de "suprimir los 
nodos seleccionados" , o seleccionar el nodo y pulsar la tecla de la Delete 
o de tecla de retroceso. 

2. Las manijas Bezier son utilizadas para modificar secciones de una línea curva, 
para hacer ésto, tira del punto medio de la curva de manera que esté tangente con 
las manijas Tira de las manijas bezier hasta que la curva se vea como la plantilla. 






Parte C: Dos curvas en una fila 
Ejercicio 3: Curvas 
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1 . Haz clic y arrastra con la Pluma en la dirección de la primera curva. Suelta el 
ratón. 





2. Haz clic en el extremo final de la primera curva; esto le indica a la Pluma la 
dirección de la siguiente curva. Suelta el ratón. 




3 . Haz clic en la punto final de la curva anterior y la curva final será hecha en los 
dos últimos puntos de anclaje. Pulsa la tecla Enter para finalizar. 
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Cuando trabajas con la Pluma, tienes que pensar antes de usar la herramienta el 
lugar hacia el cual quieres que la línea cambie. Los mejores lugares a hacer clic se 
llaman puntos de la inflexión, y se refiere al lugar donde la curva cambia la direc- 
ción. 

Ejercicio 4: Curvas y Ángulos 

La última muestra de la plantilla es un ejemplo de 3 curvas unidas. Par hacer esto, 
utilizaremos dos tipos de nodos; nodos lisos (por omisión en la Pluma y el tipo de 
los nodos que hemos estado utilizando hasta ahora) y nodos de esquina (que crean 
ángulos agudos). 

1 . Usando la Pluma, haz clic y manten el botón del ratón al principio de la primera 
curva, arrastra el ratón hacia fuera para crear una manija bezier en la dirección de 
la curva. La manija bezier será indicada con una línea negra. 




2. Suelta el botón del ratón para revelar la primera curva, indicada por una línea 
roja. 



3. Mueve tu ratón hacia la esquina donde la primera y segunda curva se unen. 
Haz clic y manten el botón del ratón presionado, arrastra el ratón para terminar de 
modificar la forma de la primera curva con otra manija bezier. Manten presionado 
el botón derecho del ratón. 
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4. Para dibujar la segunda curva con un cambio notable en la dirección con respec- 
to a la primera, manten presionada la tecla Shift, lo que hace que la Pluma cambie 
al modo de esquina. Arrastra la segunda mitad de la manija bezier en la dirección 
de la segunda curva. 




5. Suelta el botón izquierdo del ratón, seguido por de la tecla Shift para revelar la 
segunda curva. Suelta siempre el ratón antes de soltar las teclas. 




6. Repite los pasos 3-5 para crear y revelar el comienzo de la tercera curva. 




7. Haz clic y manten el botón del ratón presionado, arrastra el ratón para terminar 
de modificar la forma de la curva final. Suelta el botón del ratón y pulsa la tecla 
enter para terminar de usar la Pluma. 
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8. Utiliza la herramienta del nodo para ajustar las manijas bezier. 




Entendiendo cómo crear líneas rectas y curvas, y convirtiendo puntos de anclaje de 
curvas en ángulos o ángulos en curvas, cualquier imagen puede ser trazada. 



Ejercicio 5: Trazando una imagen y creando 
una máscara de recortes 

Máscaras de recortes 

La Pluma se usa frecuentemente en imágenes o arte vectorial para crear máscaras 
de recortes. Una máscara de recortes es utilizada para re-definir qué partes de un 
objeto van a ser visibles para el espectador. Generalmente son usadas en imágenes 
fotográficas para "quitar el fondo" de una figura en la imagen. 

Para este ejercicio, coloca cualquier imagen sobre la plantilla y trázala con la Plu- 
ma en el Layer 2. Una imagen de una figura humana es un desafío ya que siempre 
incluye una combinación de curvas y líneas rectas. En este ejemplo utilizaremos 
una imagen del dominio público de un saludo de Vulcan. 



Ejercicio 5: Trazando una imagen y creando una máscara de recortes 
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Primero la Pluma será utilizada para dibujar el trazo alrededor del brazo, después 
la trazo resultante se utiliza como máscara de recortes para ocultar el resto de la 
fotografía. 

1. Crea una nueva capa (en nuestro ejemplo la nueva capa es llamada Mano de 
Vulcan), oculta las otras dos capas, haciendo clic en los iconos de ojos, de manera 
que cambien de abiertos a cerrados 



.^Capas (Mayús,+Ctrl+L) 






Mano VUlcan 
Capa 2 
Capa 1 



* 






* £ 



Modo de mezcla: 
Opacidad, % 



Normal 



I 100,0 



2. Elije Archivo >Importar para colocar la imagen de la mano (o cualquier otra 
imagen) en la nueva capa. 
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Atención: Por omisión, Inkscape hace un vinculo de los archivos en lugar de colo- 
carlos en el documento. Esto puede ser útil pues el tamaño del archivo .svg no es 
afectado por imágenes grandes. Sin embargo, los archivos vinculados deben estar 
disponibles en el disco duro en la misma ruta que estaban cuando fueron importa- 
dos al archivo .svg, para poder ver o imprimir el documento. 

3. Fija la opacidad de la capa de la Mano de Vulcan a el 30% y sobre ella, crea una 
nueva capa (en nuestro ejemplo, llamado trazo de la mano de Vulcan). 



\vk y. ■ 15110 1(0» ITO 



Nombre de la capa: |irazo de marta Vulcar| 
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4. Utiliza la Pluma para dibujar la mano. Recuerda comenzar y terminar en el 
mismo punto de anclaje. También recuerda que la trazo no tiene que ser perfecto, 
ya que se puede utilizar la herramienta de nodos para modificar el dibujo hecho. 




Ejercicio 5: Trazando una imagen y creando una máscara de recortes 
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5. Para transformar la trazo en una máscara de recortes, selecciona el trazo y la 
imagen. Utiliza la herramienta del selección para hacer y haz clic para seleccionar 
primero el trazo, luego con la tecla Shift presionada, haz clic en la imagen para 
seleccionarla. Verás líneas de puntos alrededor de la trazo que acabas de dibujar y 
líneas punteadas y flechas de transformación alrededor de las esquinas de la foto- 
grafía. Elija el Objeto > Clip > Aplicar. 
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Una máscara de recortes se utiliza para definir las áreas que se quieran mostrar al 
espectador, mientras que cualquier parte de la imagen fuera del trazo, queda escon- 
dida. 
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En esta imagen, el resultado de la máscara de recortes es notable en la capa de la 
mano de Vulcan. 

Consejo: Si estás haciendo una máscara de recortes, debes tener una trazo en la 
imagen fotográfica. Es decir, la imagen fotográfica debe ser más grande que la 
trazo que será utilizada para enmascararla. Si el trazo es más grande que la imagen 
entera, la máscara revelará simplemente todo, en este caso, realmente no necesitas 
una máscara. 

Consejo: Asegúrate de hacer clic en el trazo, luego haz clic con la tecla Shift 
presionada en la imagen fotográfica, en cualquier lugar fuera del trazo. Al hacer 
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clic con la tecla Shift presionada dentro del área que incluye el trazo y la imagen, 
deselecciona todo. 

6. Cuando una imagen tiene una máscara aplicada a ella, la imagen y la máscara se 
agrupan juntas y se pueden ser manipuladas por la herramienta del selección como 
una unidad. 




Notas finales sobre máscaras de recortes 

No estamos haciendo esto en los ejercicios, pero debes saber que puedes soltar 
la imagen de su máscara en cualquier momento seleccionando la imagen enmas- 
carada y eligiendo el Objeto > Clip > Soltar. Esto permite modificar la imagen o 
el trazo de la máscara por separado. Repite el proceso en el paso 5 para reajustar 
la máscara en la imagen. Para borrar una máscara de recortes, suéltala y verás la 
trazo que fue utilizado como máscara y la fotografía. Los dos objetos separados se 
pueden borrar o modificar individualmente. 



Ejercicio 5: Trazando una imagen y creando una máscara de recortes 
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El Internet es un tesoro de las imágenes fotográficas. Los artistas y los diseñadores 
combinan a menudo elementos de los medios de este archivo visual de manera in- 
ventiva, o utilizan imágenes transferidas como investigación para su propio trabajo 
creativo. Actualmente que vivimos en una cultura de copiar/pegar, y usar imágenes 
bajadas de la red tiene ramificaciones legales. 

¡El hecho de que puedas descargar una imagen, no quiere decir que puedas usarla! 
Una imagen descargada puede estar protegida por leyes de Derechos de Autor. Los 
derechos reservados son herramientas legales para preservar control sobre el uso de 
un trabajo creativo. Los libros, poemas, grabaciones y composiciones musicales, 
fotografías, pinturas, esculturas, la radio y la transmisión televisiva, las películas, e 
incluso las danzas pueden tener derechos de autor. 

Inglaterra inició lo que conocemos como leyes de Derechos de Autor a comienzos 
de 1700. El uso extensivo de la prensa y de el aumento en índices de alfabetismo 
dio lugar a que las imprentas reimprimieran los textos sin dar crédito a sus autores 
o págales. La atribución de los derechos de propiedad en material intelectual ha 
tenido implicaciones legales y económicas de gran envergadura. El tiempo de 
duración de los derechos reservados varían dependiendo del país. En los Estados 
Unidos, el tiempo total de derechos reservados era la vida de un autor más 50 años; 
en el vigésimo quinto año después de la muerte de un autor, sus trabajos serían 
liberados en el dominio público. Cuando un trabajo está en el dominio público, no 
es poseído ni es controlado por nadie. Cualquier persona puede utilizar el material, 
de cualquier manera, sin deber al creador. Para los trabajos creados por corpora- 
ciones, la tiempo era de 75 años a partir de la fecha de la publicación. En 1998, el 
congreso pasó el Acto de la Extensión del Término de los Derechos Reservados de 
Sonny Bono, que extendió los derechos reservados por 20 años. Esta ley fue autor- 
izada por un músico-actor-convertido en Miembro del Congreso, con la ayuda de 
la presión ejercida por la industria. El acto fue apodado el acto de la protección de 
Mickey Mouse , pues Disney dio su apoyo extensivamente para asegurar que la ley 
cubriera también sus derechos reservados sobre Mickey Mouse. El acto esencial- 
mente suspendió el adelanto hacia el dominio público en los Estados Unidos según 
lo cubierto por regulaciones a plazo fijo de los derechos reservados. 
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Uso justo y apropiación 



La comprensión de los principios sobre el uso justo, ayuda a millares de imágenes 
protegidas con tan sólo un clic del ratón. 



Uso justo 

Reproducción es un rasgo central en medios digitales. A diferencia de litografías, 
discos de vinil, cintas de cassette, videocintas, libros, o impresiones fotográficas, 
una copia exacta de medios digitales puede hacerse de una copia digital. Esto 
es posible también para los archivos, los Cdes, MP3s, DVDs, y las páginas web 
digitales. Del muestreo a mezclas, el collage a los contrapublicidad, los artistas 
contemporáneos y creativos utilizan archivos digitales como material fuente para la 
creación de nuevas obras. Estos trabajos se consideran nuevos y originales, pero se 
construyen a veces con los pedacitos y las partes de trabajos con derechos de autor. 
En la era digital, las nuevas obras se crean a menudo cuando más que una trabajo 
existente se recombina de una nueva manera, proporcionando nuevas relaciones 
visuales y nuevas ideas. 

El contenido con derechos de autor se puede utilizar en nuevas obras si el permiso 
se obtiene del sostenedor de los derechos reservados, o si el uso de los medios 
entra en la categoría de uso justo. Bajo cláusula del uso justo de la ley de Dere- 
chos de Autor, el material con derechos de autor limitado se puede utilizar para 
un propósito transformativo, tal como comentario crítico, o parodia del material 
inicial. Los cuatro factores claves son 

1 .El propósito del trabajo derivado 

2. La naturaleza del contenido derivado: los derechos reservados no limitan el uso 
de los hechos o de las ideas transportados por un trabajo original, solamente la 
expresión creativa original 

3.1a cantidad de trabajo original utilizado 

4. El efecto que la nueva obra tiene en el valor del mercado potencial o mercado 
actual de la obra original 

Medir estos cuatro factores en un caso de derechos reservados no es una tarea fácil, 
razón por la cual, existen jueces para hacer éste trabajo. Sin embargo, medio com- 
erciales exitosos que toman ventaja de la cláusula de uso justo incluyen programas 
como Saturday Night Life, Los Simpsons y canciones de Weird Al Yankovic. 
Todos éstos trabajos usan la parodia, uno de los propósitos tradicionales que es 
protegido. 

Otro de los propósitos tradicionales protegidos es el uso educativo en salones de 
clase. Hay que tomar en cuenta que el hecho de que no puedas ser demandado por 
el usar de manera apropiada una obra para una asignación, deberías usar esa obra 
para avanzar en tu educación, no por conveniencia. 
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Es bueno saber, que las expectativas aumentan para trabajos hechos fuera de 
salones de clase. Para los medios comerciales, la transformación del material de 
fuente debe ser significativa. Hablaremos más sobre esto en el ejercicio 3. La 
cláusula del uso justo tampoco significa que puedes plagiar. El plagio, es una 
ofensa ética aparte de los derechos reservados, oculta el hecho de que las ideas o el 
contenido han sido copiados en alguna parte. Incluso en casos donde no ha ocur- 
rido una violación legal, el plagio es una violación ética seria opaca el esfuerzo 
académico y destruye la credibilidad del plagiario. 

El uso justo resalta que el trabajo se ha copiado y utiliza el trabajo original como 
trampolín para desarrollo adicional, citando a menudo al creador de manera obvia 
para que no queden dudas. 

Consejo: Para más información sobre uso justo, visite el Stanford Fair Use y el 
sitio de los derechos reservados en http://fairuse.stanford.edu o el Center for Social 
Media's paper, Recut, Reframe, Recycle en http://www.centerforsocialmedia.org/ 
resources/publications/recut_reframe_recycle. 



Apropiación 

La apropiación es una palabra que es utilizada por los artistas de los medios para 
describir la acción visual o retórica de asumir el control de algo que se sabe ya, por 
referencia visual. Por ejemplo, Andy Warhol se apropió del a identidad visual de 
la lata de sopas Campbell, haciéndolas impresiones icónicas. Las latas de la sopa 
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de Warhol son una interpretación del objeto físico. La referencia visual de la lata 
de sopa original es importante, pues el espectador necesita esta información para 
entender la idea que la referencia transmite (la traducción personal de esto podría 
extenderse de una sensación asociada a algo tan simple como un alimento ameri- 
cano popular icónico o la comodidad a la repulsión de la simplificación de la vida 
doméstica) . Transformando no sólo la gama de colores para retratar las latas de la 
sopa, pero también el lugar en donde el espectador los encontrará (una galería de 
arte en comparación con un mercado de la tienda de comestibles), Warhol se apro- 
pia de las latas de la sopa de la Campbell original para crear el arte que se relaciona 
con la cultura popular en su forma icónica. La apropiación entra en la categoría de 
uso justo. 

¡Irónico, no tenemos permisos de los derechos reservados para demostrar las pin- 
turas o las fotografías de Warhol de las latas de la sopa de Campbell en este libro! 
Intente una búsqueda de la imagen si curiosidad sobre éste trabajo. 

La Fuente, Marcel Duchamp (conocido también como R. Mutt), 1917, objeto pre- 
fabricado, fotografiado por Alfred Stieglitz. 

Marcel Duchamp fue el primer artista conocido en apropiarse de un objeto común 
en su arte. Ésto desafió la comunidad del arte en cuanto a lo que puede definirse 
como arte y lo que no. Duchamp pensaba que al declarar un objeto como arte, era 
el rol que permitía al artista crear arte. En el caso de la fuente, él tomó un orinal, lo 
volteó, y lo firmó con su pseudónimo Mutt del R. 

En este acto de la apropiación, el objeto diario más de lo que originalmente era. 
Las transformaciones de Duchamp incluyeron la adición de la firma a la por- 
celana, el cambio del contexto de un cuarto de baño a una galería, y el cambio de 
su propósito (el origen del orinal antes de que cayera en manos de Duchamp es 
desconocido, pero después de 1917 nadie ha utilizado el orinal que el Mutt del R. 
firmó). De ésta maneras, el uso de Duchamp del orinal resaltaba sobre la compren- 
sión del espectador del orinal como un concepto y un objeto. Distraer al espectador 
del contenido original, es una de las características principales de la apropiación. 
Además de uso justo, muchos trabajos están en el dominio público o se autorizan 
bajo Creative Commons. 

Determinando que se proteje, cuál es justo el uso, y que es libre de utilizar es parte 
del trabajo del productor cultural. Algunas técnicas harán más fácil buscar en un 
vasto archivo de imágenes en línea. 



Ejercicio 1: Búsqueda avanzada en Google 

1. Abre Google (http://images.google.es) en un navegador de internet. 
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2. Escribe la palabra "Bauhaus" en el campo de búsqueda y haz clic en el botón 
buscar imágenes. El motor de búsqueda mostrará todas las imágenes relacionadas 
con la palabra "Bauhaus." La Bauhaus fué una escuela de arte y diseño revolucio- 
naria que operó en Alemania desde 1919 hasta 1933. La Bauhaus definió la edu- 
cación en el arte para el siglo veinte y más allá. 



Búsqueda 



Google 

ueda de irnáaenesl^J 



¡ Buscar imágenes 



3. Filtra tus resultados por tamaño del archivo. Haz clic en el menú desplagable al 
lado de la palabra "Mostrando:" cerca de la parte superior de la página de resulta- 
dos. Puedes elegir de una gama de imágenes pequeñas a imágenes extra grandes. 
Selecciona las "imágenes grandes," y suelta el menú. La página se refrescará sola- 
mente para mostrar las imágenes más grandes que 600x800 píxeles y más peque- 
ñas que 1200x1600 pixeles. 

4. ¡Espera errores! Casi cada resultado de la búsqueda produce errores. Los errores 
siguen a veces un patrón que pueden ser identificados y excluidos de la búsqueda. 
En este caso, es probable que los resultados incluyan las imágenes de la banda 
"Bauhaus" de los años 80. Para quitar los resultados de la banda, agregua la pal- 
abra "banda" precedida con un signo de menos (e.g." - banda "). 

5. Los resultados pueden ser limitados buscando para una frase específica. Para 
buscar por una frase, incluya las palabras en comillas. Haga una búsqueda para el 
"Bauhaus Dessau." Cerciórese de reajustar su tamaño de la imagen a "todos los 
tamaños de imagen." Sus resultados deben incluir las imágenes de La Bauhaus 
Dessau. Dessau, Alemania fue la localización de La Bauhaus a partir de 1925- 
1932. 
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Imágenes Mostrando: Todos los tamaños de imagen "*■ 


| Cualquier contenido |v 






Lesjoynes at Bauhaus 
469x313 - 123 KB - jpg 

paintmgzombies.wordpress.corr 




Bauhaus Dessau 

800x600 - 175 KB - jpg 

palemics.wordpress.com 




Bauhaus-Dessau 

Ateliergebáude ... 

965 x 1639 - 612 KB -jpg 

upload.wikimedia.org 

[ Más información de 

upload.wikimedia.org ] 
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La búsqueda avanzada de imágenes te dará control sobre parámetros adicionales, 
tales como el tipo de archivo, modo del color, y así sucesivamente. 

6. Haz clic en una de las imágenes resultantes de la búsqueda. 

7. Haz clic en "ver imagen en tamaño completo" para cargar la imagen en la reso- 
lución original en una nueva ventana. 



s cayanas da Quilla da htigy/pa 



___ 



Archivo Editar Ver Historial Marcadores Herramientas Ayuda 



f "*J http://¡mages. google .com/imgres?¡mgurl=http://pa¡nt 



¡jMost Visitedv ^Getting Started |-_|l_atest Headlinesv* 
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Ver imagen en tamaño completo 

469 x 313 - 123 KB - jpg - paintingztmibies.files.wordpress.com/2008j 

La imagen puede estar protegida por derechos de autor. 

A continuación se muestra la imagen tal como aparece en: paintinqz 



8. Descarga el archivo arrastrándolo a tu desktop, haciendo click en Archivo > 
Salvar, o haciendo click en el botón derecho del ratón y seleccionando "guardar 
imagen como". Salva el archivo en un lugar del disco duro que sea fácil de locali- 
zar (el desktop o las carpetas de los documentos son lugares típicos para guardar 
archivos de utilizados en sesiones cortas de trabajo). 



iiiii^J-jraiaisjjKj Qf>E* imagpub 4S^^ f¿^_-- 



__T S| nttp://pa¡ntingzcmbies. files .wordpres5.com/20D8/ll/bauhaus-dessau_dw_li_172 161g.jpg 




r imagen... 
Establecer como fondo de escritorio... 
Bloquear imágenes de paintingzombie 
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Ejercicio 2: Búsqueda en el dominio 
público 

¡Sólo porque puedas descargar una imagen no significa que puedas utilizarla! 
Una imagen puede estar protegida por leyes de Derechos de Autor. Similar a una 
patente, los derechos reservados son una herramienta legal para preservar control 
sobre el uso de un trabajo creativo. Los libros, los poemas, las grabaciones y las 
composiciones musicales, las fotografías, las pinturas, las esculturas, la radio y la 
transmisión televisiva, películas e incluso la danza pueden tener derechos de autor. 
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El artista conocido antes como Prince incluso tiene su nombre simbólico, "sím- 
bolo de amor #2" (), protegido por la ley de Derechos de Autor. Inglaterra inició 
las leyes de Derechos de Autor familiar a los ciudadanos de hoy como el Estatuto 
de Anne (1709). Por los años 1700, el uso extenso de la prensa y un aumento en ín- 
dices de alfabetismo dio lugar a que las imprentas reimprimieran trabajos sin pagar 
o acreditar al autor original. El Estatuto de Anne dio derecho exclusivo al autor 
sobre un trabajo por un período de tiempo establecido. 

El tiempo de duración de los derechos reservados varían dependiendo del país. En 
los Estados Unidos, el tiempo total de derechos reservados era la vida de un autor 
más 50 años; en el vigésimo quinto año después de la muerte de un autor, sus tra- 
bajos serían liberados en el dominio público. Cuando un trabajo está en el dominio 
público, no es poseído ni es controlado por nadie. Cualquier persona puede utilizar 
el material, de cualquier manera, sin deber al creador. Para los trabajos creados 
por corporaciones, la tiempo era de 75 años a partir de la fecha de la publicación. 
En 1998, el congreso pasó el Acto de la Extensión del Término de los Derechos 
Reservados de Sonny Bono, que extendió los derechos reservados por 20 años. 
Esta ley fue autorizada por un músico-actor-convertido en Miembro del Congreso, 
con la ayuda de la presión ejercida por la industria. El acto fue apodado el acto 
de la protección de Mickey Mouse, pues Disney dio su apoyo extensivamente 
para asegurar que la ley cubriera también sus derechos reservados sobre Mickey 
Mouse. El acto esencialmente suspendió el adelanto hacia el dominio público en 
los Estados Unidos según lo cubierto por regulaciones a plazo fijo de los derechos 
reservados. 

Las imágenes en dominio público no tienen ninguna restricción de en cuanto a 
autorización. Una imagen pasa a ser parte del domino público, cuando su derecho 
de autor expira. El dominio público se encuentra actualmente bajo ataque, pues 
muchas corporaciones luchan para controlar sus monopolios. La ironía es que los 
derechos reservados fueron introducidos para proteger a autores contra este tipo de 
poder monopolístico. 

Para descubrir más sobre cultura libre, el dominio público, y los campos comunes 
creativos, visitan http://CreativeCommons.org, o http://lessig.org. Lorenzo Lessig 
es uno de los fundadores de los campos Creative Commons y del movimiento de 
Cultura Libre (Free Culture). 

Una imagen es protegida por los derechos reservados a menos que: 

el uso califica como "uso justo" : 

1 . El autor declara que es parte del dominio público 

2. La imagen es lo suficientemente antigua, de manera que han expirado los 
derechos reservados 

3. El autor la autoriza bajo modelo alternativo 

Existen varios modelos alternativos de autorización, el más popular entre ellos es 
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Creative Commons. Creative Commons trabaja bajo el apodo "algunas derechos 
reservados" y ofrecen una gama de licencias con grados sutiles de control sobre 
trabajos derivados y y aplicaciones con ganacias. Wikimedia Commons (http:// 
commons.wikimedia.org), y Flickr ( http://flickr.com/creativecommons) se enfo- 
can parcial o exclusivamente en imágenes en el dominio público o protegidas con 
licencia Creative Commons. 

Wikimedia Commons es archivo del dominio público e imágenes Creative Com- 
mons. Como Wikipedia, es organizado por temas históricos, y colectivamente 
corregido y mantenido. 

1. Ve a Wikimedia Commons. (http://commons.wikimedia.org/wiki/Portada) y 
busca Walter Gropius, el director de fundación Bauhaus. 
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2. Ve varias de las imágenes, y nota que las imágenes son dominio público o autor- 
izado bajo Creative Commons. 
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3 . Flickr un sitio para compartir fotografías que anima la cultura de compartir a 
través de varios de sus opciones, y muchos de los usuarios de Flickr autorizan sus 
fotografías bajo Creative Commons. Ve a Flickr (http://flickr.com), haz clic en 
Buscar y luego haz clic en Búsqueda Avanzada. 
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Iniciar sesión 



Crea tu cuenta 



Solo le llevará un momenlo con 1u ID de Yahoo! 



Comparte fotos. 
Conoce el mundo. 



video 



S9 



FOtOS Grupos Pei-.oivi-;. 



W TeKtocompIgto O S¿b9tiqu9las 
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Buscar Lyi cnrn-'n-'i 



4. Escribe Bauhaus, y selecciona "Buscar sólo dentro de contenido con licencias 
de Creative Commons ", lo cual significa que solo busque imágenes dentro de las 
licenciadas bajo Creative Commons. Todo en su búsqueda será CC autorizado, 
aunque no todo permitirá trabajos derivados (por ejemplo, usar la imagen en un 
collage) o uso comercial. 



I Marcadores Herramientas Ayuda 
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5. Nota que todas las imágenes en la búsqueda están organizadas por etiquetas. 
Una etiqueta son una o dos palabras usadas para categorizar imágenes (así como el 
otro contenido en la red). En este caso, muchas de ellas son tienen como etiqueta 
"Bauhaus". 




Bauhaus (the building, not 
the 1980s band) 

de ChicagoEye 

(=) 2 comentarios jf 6 favoritas 

Co n I a etiq ueta ge rin any, de 5 5 au , 
Cacada el 25 de julio, 2005 

.-¿ÍL Ve más de las fotos de ChicagoEye, o 
visita su perfil. 



6. El hacer clic en una etiqueta, revelará una página referente a esa etiqueta. 



ü - i4u¿Wu Fk¿,i^ 



il Marcadores Meíramierrtas £yijda 



¡ ti htTp';,^vwfirki.i-om,fpl-ir:t^^,'rp.r|f/ri-|iiliP.i.-T i /rli.ft!=r^, 1 



^B@ 



tarted gjLatest RiadÜnes** 

flickr 

miela La visita crea r tu en la exbimw 

Explorar/ Etiquetas / bauhaus / clústeres 



BO501 ¡Vlltfc 

Busca t 



km: [bauhaus 



fEü. 



arcriiteclure, gerrratiy d#ssau Ltíi 

•l'-'i'in , ■-- iil-'-.l-il-i--- . T '■ ■ • , ■■ , "i"'" '■T' 11 ' 



^ÜESÜG 



SMttle, COfffi*, capítol Mil 

^-» Ver rrÉ-s en eíle clúster... 



Ejercicio 2: Búsqueda en el dominio público 



95 



Autorizando tu trabajo 



Autorizar un trabajo con una licencia Creative Commons (CC) es sencillo. 
Cuando un autor establece una licencia Creative Commons, decide si ambos usos 
comerciales y no comerciales están permitidos (algunos son sólo no comerciales), 
si otros están autorizados para modificar el trabajo una vez que se encuentre bajo 
licencia (llamado "trabajo derivativo"), y si trabajos derivativos están permitidos, 
bien sea o no el nuevo trabajo modificado, también debe tener una licencia con CC 
(llamado "derivado semejante"). 
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Explicación de las- licencias 
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Los seis tipos de licencias y una descripción muy breves de ellas a continuación. 
Más información ser encontrada en CreativeCommons.org. Todo el CC establece 
que el autor original será acreditado por su trabajo, además de los siguientes det- 
alles: 



k§)®®© 



1 . )^~tm-vm>umi\M Atrihurinn No Comercial No Derivados (by-nc-nd) Esta licencia 
proporciona la menor libertad a otros pues el trabajo no se puede utilizar para los 
propósitos comerciales y trabajos derivados no pueden ser hechos (es decir sería 
ilegal utilizar este trabajo como parte de un collage). 



@®®@ 



Atribución No Comercial Derivado Semejante (by-nc-sa) esta 
licencia permite que otros construyan sobre el trabajo original (por ejemplo, este 
trabajo se podría utilizar, legalmente, en un collage) mientras las nuevas obras 
también se autoricen de manera semejante, con un por-nc-sa del CC. 



3 ■ ^^k» Atribución No Comercial (by-nc) esta licencia permite que otros 
construyan sobre el trabajo original (este trabajo se podría utilizar, legalmente, en 
un collage) sin tener que autorizarlo como CC by-nc. Sin embargo, el trabajo resul- 
tante no se puede utilizar con propósitos comerciales y el autor original, como con 
todas las licencias CC, debe ser acreditado. 



4- ^^»ím£M Atribución Ningunos Derivados (by-nd) esta licencia permite 
que otros utilicen el trabajo en su estado original, sin crear ningún tipo de trabajo 
derivado, para cualquier propósito (comercial o no comercial). 



kg)®(¡> 



Atribución Semejante (by-sa) esta licencia permite igualmente que 



Autorizando tu trabajo 



otros utilicen el trabajo mientras en su estado original o en formas derivadas, para 
los propósitos comerciales y no comerciales, mientras las nuevas obras también se 
autoricen con la misma licencia de by-sa del CC. 



i Atribución (by) esta licencia proporciona la mayor libertad a otros 
que quieran utilizar el trabajo autorizado. 



Ejercicio 3: Búsqueda en los sitios Web 
comunes de fotografía 

Otras fuentes para buscar imágenes son archivos de fotografía como Gettylmages. 
com o iStockPhoto.com. Estas páginas web están llenas de fotografías y gráficos 
vectoriales para ser utilizados en publicidad, medios corporativos, folletos, campa- 
ñas, y otras aplicaciones de diseño. 

La ventaja de estos sitios es que parecen un sinfín de detalles a la hora de la 
búsquda. Aquí está la imagen del iStockphoto adquirida de una búsqueda para el 
"escritor, mesa": 




http ://www.istockphoto .com/file_closeup/object/3 5 845 37_writing .php?id=3 5 845 37 

La desventaja es que las fotografías son genéricas, y tiene la sensación impersonal 
de un anuncio. Nadie parece nunca tan feliz como un modelo en un anuncio, y la 
mayoría de la gente siente que no son tan físicamente atractivos como los modelos 
usados en fotografía comercial. Los archivos de imágenes trabajan en una varie- 
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dad de situaciones para dar al comprador flexibilidad y valor. Por lo tanto, no nos 
asombra sentir que les falta especifidad, y la calidad genérica total, en una imagen 
común. 




http://www.istockphoto.com/file_closeup/object/4748268_businessman_talking_ 
on_cellphone.php?id=4748268 

¡Nadie camina con su teléfono celular y una sonrisa tan grande tal como este 
hombre! Las fotografías de éstos archivos son actuadas. Estas imágenes se deben 
utilizar cuidadosamente, ya que el nivel de autenticidad de la acción dentro de la 
imagen es perceptiblemente baja. 



1. Ve a Getty Images (http://www.gettyimages.com/71anguage-es) y busca en las 
Imágenes de Creative una imagen de lo que estés haciendo ahora. En nuestro caso, 
"persona escribiendo en la computadora." Puedes escribir "persona leyendo libro 
en sofá." Intenta agregar características específicas como el color de cabello o el 
tipo de ropa que estés usando. 
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Archivo Editar Ver Historial Marcadores Herramientas Ayuds 
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2. Redefine tu búsqueda con las frases de la búsqueda que ellos proveen. 



nraMWjgg^Bj Q 


► Cfl'-íKjr r un 


"iiiü'rnin" 


V <i.n!. 




D CM^mMiICUwM |_ r* m n. Esto ( 


► bus 

► Onoer, 

► Edad 


ODüalb] 




| Yahvraburar 1— Dfiau:l JiSir b íurttin do xbubi 


^^™ 





3. Pregúntate si cualquier persona se ve como ese contenido, pensativo, o fotogé- 
nico mientras que lee un libro a menos que estén actuando para la cámara. 

Una estrategia para usar la fotografía común es alterar radicalmente la imagen 
original, con ajustes extremos de la imagen en Gimp, o remontando la imagen en 
Inkscape. Como transformación de la imagen, esta clase de tratamiento da lugar 
generalmente a usar la imagen bajo cláusula del uso justo. 

La siguiente imagen fue creada de una colección archivos de fotografías. Mira 
cómo cualquier información fotográfica se ha modificado y se ha abstraído en una 
forma ilustrativa. 
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De la serie, ¡Desearía estuvieras aquí! Postales de Nuestro Maravilloso Futuro, 
Packard Jennings y Steve Lambert, 2007, 6 ' por 4 ' impresiones del giclee. 
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Adquisición y Resolución de 
la Imagen 

Hay varias maneras de traer una imagen a la computadora. Los dos mas comunes 
son de naturaleza fotográficos, es decir, ambos métodos implican la exposición de 
sensores a un artículo o escena en el mundo real. La cámara o el scanner escribe 
datos digitales para mostrar esa imagen en la pantalla. Mientras que la tecnología 
de sensores es básicamente la misma, la cámara esta hecha para capturar escenas 
con profundidad de campo, y por el contrario el scanner esta hecho para enfocar y 
capturar un solo plano. 

Un fotograma es creado al poner objetos en papel foto-sensible, exponiendo los 
objetos y el papel a la luz, para después procesar el papel y revelar la impresión. 
Una cámara no es necesaria si se quiere producir este tipo de imagen gráfica. Los 
primeros fotogramas fueron hechos por William Henry Fox Talbot y Anna Atkins a 
mediados de siglo XIX. Este tipo de impresión de contacto puede tener una resul- 
tado realista y misterioso, dado que, como una radiografía, reduce la información 
tridimensional a un plano de dos dimensiones, sin la perspectiva que el lente de 
cámara proporciona. El enfoque general y plano de la información visual de este 
método da un resultado poético y mágico. 

Un escanograma es un método digital que produce resultados similares a un foto- 
grama. Ello se consigue al sobreponer objectos directamente en el scanner. 
El Fotograma es una técnica que ha sido utilizada por fotógrafos, artistas, y dis- 
eñadores. Ana Atkins creó las primeras reproducciones de elementos naturales. Los 
experimentos vanguardistas de Man Ray, EL Lissitzky, y László Moholy-Nagy son 
trabajos centrales en el arte y diseño de los años 20. Diseñadores comerciales tales 
como Paul Rand utilizaron esta técnica para el diseño de empaques y cubierta de 
libros. Este proceso es divertido de escanear, y los resultados son siempre sorpren- 
dentes. 
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Fotograma de algas, del libro British Algae , Ana Atkins , 1 843 . Este es el primer 
libro hecho íntegramente por imágenes fotográficas. 




Fotograma de limones, cargado a Wikimedia Commons en agosto de 2005 por el 
nombre de usuario Cormaggio. 
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En realidad, es probable que pueda hacer algo diferente, escaneando algo de sus 
propios materiales . Esta es una imagen escaneada que utilizaremos como archivo 
para el ejercicio 2. 

Ejercicio 1: Creando un escanograma y 
entendiendo la resolución del archivo 

Los escáner son dispositivos de entrada ópticos que utilizan programa para enviar 
la imagen capturada de la cama del escáner a la computadora. Aunque programa 
de escáner varía entre marcas, todos los escáner funcionan de manera semejante, 
y todos los programa de escáner tienen las mismas funciones esenciales. General- 
mente, un escáner se utiliza para crear una imagen digital de dos dimensiones. En 
este ejercicio, usted escaneará un objeto tridimensional. 

1. Pon el objeto en la cama del scanner. Si la tapa no se cierra, pon un pedazo de 
paño oscuro alrededor del scanner, así la luz de ambiente no se filtrara, alterando 
la exposición durante el scaneo (una chaqueta o un suéter oscuro funcionará.) 
Estamos escaneando una flor que cayó a tierra.Esta reposa pegada a la cama del 
escáner, de tal manera nos sera fácil cerrar la tapa. 

2. Abre el programa Gimp. Ve a Archivo > Crear > Xsane > Device dialog... de 
Esta manera, se abrirá el programa para escáners Xsane.. 
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3. El escáner puede crear automáticamente una vista previa de lo que se coloca en 
la cama de escaneo. También puede darse el caso donde lo que muestre el pro- 
grama, sea una imagen del último escaneo hecho. Haz clic en el botón de vista 
previa para ver el contenido de lo escaneado en la ventana programa. 
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4. Si el objeto es más pequeño que la cama del escáner, debes seleccionar el área 
a escanear marcando sobre el área de la imagen. Selecciona el botón (+) en la 
esquina superior izquierda (el primer icono) de XSane, haz clic y arrastra el ratón 
sobre el área de vista previa sin cambiar de herramienta. En Este momento, el área 
seleccionada esta marcando la localización del objeto en la cama del escáner. Si le- 
vantas la tapa del escáner y mueves el objeto, tendrás que seleccionar nuevamente 
el área de escaneo. 



5. Elije el tipo de resolución que necesitas. Este es un paso crucial. Antes de esca- 
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near, el artista debe decidir que tipo de resolución necesita. 

Diversos dispositivos de salida requieren diversas resoluciones para resultados de 
calidad. La resolución es el número de pixeles por la pulgada (PPI siglas en inglés 
de las palabras "pixels per inch"), también llamada puntos por la pulgada (DPI, 
siglas en ingíes de las palabras "dots per inch"). En 1984, cuando Apple inició 
el sistema de texto para el cliente WYSIWYG, habia una necesidad de traducir 
el tamaño de las letras en pantalla a dimensiones de impresión en pulgadas. Los 
monitores de las primeras Macintosh usaban la lógica de 72 pixeles por pulgada o 
72 puntos por pulgada. La mayoría de los sistemas operativos modernos muestran 
96 puntos por pulgada. Las impresoras pueden imprimir fácilmente 300 puntos en 
una pulgada, y algunas pueden aumentar mucho mas dicha cifra. Saber qué tipo de 
resolución tiene el dispositivo de salida previsto te ayudará a decidir a qué resolu- 
ción escanear. 

Resolución para Impresión: la resolución se mide en puntos o pixeles por pulgada 
(dpi o ppi). La resolución de la imagen escaneada es una característica importante 
en la impresión final o la salida en pantalla. En casos comerciales o no profesio- 
nales, tales como impresoras de chorro de tinta personales (inkjet) o impresoras 
láser que se encuentran en almacenes como Kinkos o Costco, la impresión consid- 
erará muy bien una resolución de 200 a 300 puntos por pulgada. En ambientes pro- 
fesionales de impresión, la regla es simple: pida a la impresora las especificaciones 
de impresión incluyendo la resolución del archivo y el espacio de color. 

Resolución para Pantalla: cualquier imagen que sea usada en pantalla, por 
ejemplo en un Web site o en un vídeo, necesitará ser guardada solamente en la 
resolución de la pantalla, o 72 puntos por pulgada. El tamaño del archivo está 
relacionado directamente con la cantidad de pixeles almacenados en cada pulgada 
del archivo de la BITMAP o de la trama. Los archivos de imagen guardados en la 
resolución de la pantalla son mucho más pequeños que las imágenes que se usan 
para impresión. 

Para determinar la resolución del escaner; primero marca el tamaño del objeto en 
el plano, luego decide el tamaño de impresión que desearías en una pagina. Si el 
objeto tiene, por ejemplo, 4 por 5 pulgadas y el objetivo es hacer una impresión 
de 4 por 5 pulgadas, entonces debes de escanear el objeto en 200 - 300 puntos por 
pulgada. Si deseas hacer una impresión de 8 por 10 pulgadas, escanea el objeto en 
el 300 dpi y aumentan la escala al 200 por ciento, o escanea el objeto en 600 dpi en 
100 por ciento de escala. 

6. Usando las pautas mencionadas anteriormente, elije una resolución y asegúrate 
de que el modo de color sea apropiado (linea en blanco y negro, escala de grises, o 
color). 
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Escanear 



Estamos escaneando en 600 puntos por pulgada. Sabemos que podemos hacer una 
impresión de alta calidad en una impresora de chorro de tinta en 300 puntos por 
pulgada. Puesto que 300 multiplicados por 2 es 600, podremos imprimir este esca- 
neado a dos veces el tamaño del área escaneada. En este caso, el área escaneada 
es un poco menos de 4 por 5 cm (o casi 1 .5 por 2 pulgadas), así que la impresión 
resultante se podría tener casi 8 por 10 cm (3 por 4 pulgadas) a 300 DPI. 

7 '. Una vez que se escanea la imagen se abrirá automáticamente en GIMP. Elije el 
Archivo > Guardar. Crea un nombre y agrega .tif al final del nombre del archivo. 
Agregar la extención .tiff , obliga a GIMP salvar ese archivo como un archivo TIFF. 
Formatos de archivo tales como JPEG, del PNG, y del PDF, comprimen el tamaño 
del archivo, y pueden dar lugar a pérdida de información digital. Los formatos de 
archivo tales como TIFF y PSD son mejores opciones de formato para las archivos 
escaneados de la alta calidad. GIMP pedirá una opción para la compresión. Haz 
clic el botón redondo ninguno y presiona el botón Salvar. 
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Ejercicio 1: Creando un escanograma y entendiendo la resolución del archivo 
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Ejercicio 2: Un viaje por las 
herramientas y ventanas en Gimp 



En este ejercicio, nuestras capturas de pantalla muestran la imagen de una imagen 
escaneada diferente a la que hicimos anteriormente. Sin embargo, esto no tiene 
mayor importancia, ya que nos concentraremos en las herramientas y ventanas en 
estos ejercicios. 

1 . Observa la imagen en Gimp. A la izquierda se encuentra la barra de herramientas 
principal. La imagen se abre en su propia ventana de imagen. Los ventanas y las 
gamas de colores serán explorados más adelante en este ejercicio. 
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2. Haz clic una vez en cualquier icono de la barra de herramientas, y nota como la 
ventana de opciones bajo la barra de herramientas principal. Todas las herramientas 
tienen opciones flexibles que se puedan usar para determinar cómo funciona la her- 
ramienta. Haz clic varios iconos de la barra de herramientas y mira el cambio de la 
ventana de opciones de la herramienta según la herramienta seleccionada. 
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La herramienta selecta del rectángulo era activa en la caja de herramientas prin- 
cipal. Esta es una imagen de las opciones de la herramienta. Cuando se selecciona 
una diversa herramienta, sus opciones se demuestran en este ventana. 

3. La ventana de la navegación se puede utilizar para explorar varias áreas de una 
imagen. Para ver esta ventana, elije el menú de la Ver > Ventana de Navegación. 
Cuanto más grande es la resolución o el tamaño del archivo, es probable que la 
imagen entera no sea visible en la pantalla en el 100 por ciento. El navegador 
puede ser utilizado para moverse en una imagen grande , pero pronto aprenderás 
teclas de atajo para evitar este ventana. ¡Esto vale la pena, ya que mientras me- 
nos ventanas abiertas necesites, más espacio tendrás para ver la imagen y trabajar 
detalladamente! Mueve la barra en la parte inferior del ventana del navegador hasta 
el final a la derecha enfocar en la imagen. 



Ejercicio 2: Un viaje por las herramientas y ventanas en Gimp 
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El pequeño cuadrado blanco con borde blanco en el ventana de la navegación 
indica qué parte de la imagen es visible en la pantalla. Nota que el la barra está 
situada completamente hacia la derecha, y en la esquina inferior izquierda el en- 
foque es de 25600 por ciento. 

4. Agranda la vista de la imagen enfocando en ella y los pixeles individuales que 
conforman la imagen. 
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Un pixel es el elemento más básico de una imagen, o una sola unidad de color del 
archivo digital trazado en bits. La última oración está llena de jerga, volvamos a 
ver esas palabras: 

Pixel 

El pixel de la palabra es una combinación de dos palabras: cuadro y elemento. Un 
pixel es la unidad más pequeña de información de color en una imagen digital. Si 
el mundo real se captura digital, se convierte en los pixeles. 

Imágenes de BITMAP o de trama 

Un archivo digital se consideruna imagen bitmap o trama (dos palabras usadas 
alternativamente) si se compone de una rejilla de pixeles. La trama es la palabra 
alemana para la "rejilla." Inkscape es una aplicación basada en vectores, mientras 
que el Gimp es utilizado primordialmente para fotografía. Gimp es visto comun- 
mente, como una aplicación de bitmaps o tramas. 

5. Es importante ver imágenes digitales al 100% pues Esta es la representación 
"verdadera" del archivo. Esta es lo mejor que podemos obtener de la pantalla. 
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Teclado Rápido: Control + Shift + E cambiará el porcentaje de la visión así que la 
imagen será tan grande como la pantalla lo permita. 

Nota que las opciones de la herramienta de la lupa incluye una lupa para alejarse 
de la imagen (lupao con un signo de menos) . Haz clic en Esta lupa y después haz 
clic en cualquier lugar de la imagen. Continúa haciendo clic para seguir alejan- 
dote de la imagen. 

6. Presiona Shift+Control+E para ver la imagen tan grande como puedas en tu 
pantalla. Ahora probaremos otrs comandos clave. Enfoca la imagen en más de un 
100% usando Command+= y la tecla espaciadora para accesar a la herramienta de 
la mano. Pulsa la tecla de la barra espaciadora y utiliza el ratón para hacer clic y 
para arrastrar en la imagen. Esto mueve la imagen alrededor dentro del espacio de 
trabajo, parecido a utilizar las barras que se encuentran en los bordes del documen- 
to. En Gimp no utilizarás estas barras, porque utilizarás la herramienta de la mano. 
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Ejercicio 3: Tamaño de la imagen, 
tamaño del archivo, y resolución 

1. Cuando se escanea una imagen o un objeto o archivos de cámaras digitales, la 
ventana de capas aparece con el nombre del archivo. Mira en el ventana de las 
capas (Ventanas >Diálogos Empotrables > Capas) y nota que la capa se encuentra. 
Haz doble clic sobre el nombre de la capa en el ventana de las capas para renom- 
brarla. Cuando renombras una capa, la capa queda automáticamente desbloqueada. 

Una capa es como una hoja del papel transparente. "Una capa en blanco" o vacía 
es transparente. Cuando imagen escaneada o una fotografía digital se abre, aparece 
en la capa del "fondo". Las capas se pueden agregar y suprimir usando este ven- 
tana. Abrir la capa del fondo es un buen hábito, pues anima al usuario a renombrar 
la capa (lo cual es siempre una buena idea) y permite modificar la capa con las her- 
ramientas y los efectos que se pueden "desbloquear" cuando la capa es bloqueada. 

Consejo: Hacer doble clic en el icono de la capa abrirá la ventana de las cualidades 
de la capa. Si sucede esto, presione el botón cancelar, luego, intenta de nuevo hacer 
doble clic específicamente en el nombre de la capa. 
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Background-8 (flor.xcf) 
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2. La barra de estado, se encuentra en la parte inferior del archivo. Haz clic el área 
de la barra de estado, seguida por un número en kilobytes o megabytes. Esta área 
muestra el tamaño del archivo. El tamaño de página es determinado por el tamaño 
de página fijado en Archivo > Preparación de la página. Por omisión, el tamaño es 
A4 o 8.26 por 11.69 pulgadas. 



3. Elije Imagen > Escalar la imagen, para ver y para modificar la resolución de la 
imagen. 



Ejercicio 3: Tamaño de la imagen, tamaño del archivo, y resolución 
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4. Nuestro archivo es alrededor de 871 x 1136 pixeles por pulgada en 600 puntos 
(en la pantalla) o pulgadas (en la impresión). 
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5. Cambiamos nuestras unidades de medida a las pulgadas usando el menú desple- 
gable a la derecha de la anchura y la altura entonces, fijamos nuestra altura en 4 
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pulgadas. Esto dio lugar a una anchura de 3.08 pulgadas. Una impresión hecha 
en una impresora de de tinta personal se verá bien, es decir, no se verá borrosa o 
pixelada, porque nuestra resolución es 600 DPI. Esta resolución es alrededor dos 
veces más grande que la necesitamos hacer una buena impresión en una impresora 
de tinta personal. 
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La ventana de Escalar la imagen permite al usuario cambiar las dimensiones de 
la imagen impresa o la resolución(dpi). Esto es favorable - no querrás cambiar el 
número de píxeles en una imagen, a menos que simplemente quieras borrar algu- 
nos píxeles para hacer el tamaño del archivo más pequeño. Los pixeles se crean al 
proceso de escanear, en un escaner o en las cámaras digitales. La única manera de 
hacer los "nuevos" pixeles es pre-escanear o volver a capturar el archivo digital 
usando una resolución más alta. No es posible crear nuevos pixeles en Giom. Bue- 
no, esto es realmente una mentira. Puedes hacer nuevos pixeles, pero no querrás 
hacer Esta. Si el Gimp vuelve a muestrear la imagen (o, hace los nuevos pixeles 
basados en los pixeles circundantes) el resultado es una imagen borrosa o pixelada. 

6. Haz clic en Escala. Nota la barra de escala o la barra de estatus de nuestra cap- 
tura de pantalla. Esta indica que algo ha cambiado en nuestro archivo, resultado 
de cambiar el tamaño de la imagen. 

7. Elija el archivo > excepto en cuanto a cambio el formato del archivo del tiff para 
bordar el archivo de XCF. El nombre del archivo no tiene que cambiar, pues un 
nuevo formato creará un nuevo archivo. Siempre excepto usar el formato nativo o 
principal nativo. 
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Ejercicio 4: De la cámara a la 
computadora 

Tarjetas de memoria son usadas en las cámaras digitales para almacenar infor- 
mación dentro de la cámara. Para enviar las imágenes del dispositivo de almace- 
namiento dentro de la cámara a la computadora, la cámara debe estar conectada a 
la computadora con un cable USB . Alternativamente , puede utilizarse un lector 
de tarjetas, para conectar la tarjeta de memoria a la computadora y leerla en el 
disco duro (similar a una llave USB). Al usar a un lector de tarjetas, simplemente, 
arrastra y lanza la carpeta de imágenes del lector de tarjetas (el cual aparecerá en 
el disco duro como un disco externo) al escritorio o la carpeta de documentos. 
Una vez las imágenes son copiadas el escritorio, se pueden borrar de la tarjeta de 
almacenamiento. 

1. Sin conectas una cámara a la computadora a través del cable del USB, deberás 
utilizar una aplicación para leer las imágenes. En Ubuntu, Gestor de Fotos F-Spot 
puede que se abra automáticamente una vez finalizado Este proceso. Para trans- 
ferir archivos de la cámara a la computadora con el F-Spot, conecta la cámara a la 
computadora (USB o firewire), el programa se abrirá y exhibirá todas las fotos que 
se importarán. 
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2. Por omisión, las imágenes serán transferidas y guardadas en la carpeta "Pie- 
tures" en el disco duro. Presiona el botón Copiar para comenzar el proceso. 
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Adquisición y Resolución de la Imagen 



Ejercicio 4: De la cámara a la computadora 1 1 7 



Escala Tonal 



La gama tonal es el cambio en valor de negro al blanco. Es el sistema de informa- 
ción de la escala de grises en una imagen. La gama tonal debe ser a veces ajustada, 
de manera que las imágenes tengan un rango total de valores en las sombres, tonos 
medio y brillos. Al Ajustar la gama tonal abordamos estos problemas comunes. 

Atención: Todos los monitores son diferentes. Si ves constantemente un color en 
particular afectando todas tus imágenes, además de un área que sabes debería ser 
gris neutro, usa los botones en tu monitor para calibrarlo hasta que puedas ver un 
gris neutro.. 



1 . La imagen es muy clara u oscura. Puede que haya mucho detalle en las áreas 
claras o en las sombras, las cuales pueden ser visibles o impresas a través de un 
ajuste. 

2. El contraste es muy bajo o muy alto. Una imagen con contrastes bajos tiene un 
rango tonal plano. Una imagen con contrastes altos tiene brillos muy claros, som- 
bras muy oscuras y muy poco detalle en los medios tonos. 



3. Las imágenes muestran un tinte de color en particular que no es deseado, afec- 
tando la imagen - evidencia de una tonalidad en áreas que deberían ser gris neutro 
o blancas. 
Visión desde la ventana en Le Gras, Nicéphore Niépce, 1826, Santo-Loup-de-Va- 




rennes, Francia. Capturado en 20 el x 25 cm, tratado con aceite de betún. ¡En este 
primer registro fotográfico, el tiempo de exposición fue de 8 horas! Nota la limita- 
da escala tonal debido a tal alto contraste entre la obscuridad y los valores ligeros. 
Madre Emigrante, Dorothea Lange, 1936. Impresión de plata en gelatina. 
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Escala Tonal 




Esta fotografía fue comisionada por la Farm Security Administration (FSA- Admi- 
nistración de Seguridad Agrícola, como se traduciría al español). Florencia Owens 
Thompson mira hacia el futuro con preocupación, mientras sus niños entierran sus 
cabezas en sus hombros. El FSA era parte del New Deal (Nuevo Trato o Nuevo 
Reparto de Cartas, como se traduciría al español), un sistema de programas ini- 
ciados por Franklin Delano Roosevelt para estimular y para revitalizar economías 
débiles a partir de 1933 - 1938. El FSA contrató a fotógrafos, tales como Lange, 
Walker Evans y Marión Post Wolcott, para documentar Norte América después de 
la Gran Depresión. Mira cómo la gama de valores tonales expresa los detalles en la 
cara y la manta de Florencia en su regazo. 
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Resultados de los ejercicios del capítulo 8 




La imagen de la izquierda es la imagen original, la imagen de la izquierda, es la 
imagen final, resultado del ejercicio del capítulo 8. Nota las pequeñas diferencias 
en el contraste y el valor tonal imagen . Deberías buscar hacer cambios mínimos 
en las imágenes, no cambios grandes en la escala tonal o intensidad del color. 

Antes de comenzar. 

Necesitarás descargar los siguientes archivos de http://www.digital-foundations. 
net/downloads/floss : 
rgb-trees.xcf y gray_trees.xcf. 



Ejercicio 1: Ajustes mínimos en el archivo 
original 

1 . Para este ejercicio, abre cualquier imagen de tu cámara digital o escáner en 
Gimp. Puedes también usar el archivo en el área de las descargas llamado rgb- 
trees.psd. 

2. Si la imagen necesita ser volteada o ser cortada, haz ese ajuste ahora. En nuestra 
imagen, cortamos la imagen original de modo que sea exactamente 3 por 4 pulga- 
das. Haz clic el icono de la herramienta de recorte en la caja de herramientas, haz 
clic y arrastra el ratón sobre la imagen. Una vez hecho esto, fija el área exacta a 3 
por 4 pulgadas, en la ventana de opciones de la herramienta de recorte. Cuando la 
mayor parte de la imagen es seleccionada, como muestra la ilustración, presiona la 
tecla Return o Enter en tu teclado para finalizar la selección del tamaño. Del menú 
capa, haz clic en "Truncar a la selección". 
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Escala Tonal 




3. Utiliza la ventana de Escalar Imagen, búscala en Imagen > Escalar Imagen. De 
Esta manera puedes revisar los cambios que acabas de hacer. 
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^iReiniciar 
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4. Elije Herramientas > Herramientas de Color > Brillo y Contraste para ajustar el 
contraste dentro del archivo de imagen. 

5. Presiona Control+Z en el teclado para deshacer el último paso. Presiona 
Control+Z otra vez y el Gimp deshace continuamente pasos anteriores. También 
puedes deshacer pasos anteriores usando la ventana del historial. Exploraremos la 
ventana del historial en los próximos pasos. 



Ejercicio 1 : Ajustes mínimos en el archivo original 
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Consejo: La opción "deshacer" se encuentra en Editar> Es prácticamente innecesa- 
rio decir esto, ya que co frecuencia usarás el comando de Gimp, y será uno de los 
atajos de teclado que memorizarás rápidamente. 



Ejercicio 2: Comprensión de la ventana 
del historial 

Ahora hecharemos una ojeada la gama tonal en la imagen. Esto se puede hacer en 
cualquier modo del color, pero con el fin de este proceso fácil de hacer para una 
primera vez, cambiaremos la imagen al modo del color de escala de grises. 

1 . Haz clic en Imagen > Modo > Escala de Grises para convertir la imagen del 
modo del color del RGB a Escala de Grises. Guarda el archivo como arboles_gri- 
ses.xcf. 

2. Haz clic en Colores > Info > Histograma. 

La parte siguiente de este ejercicio es ser observador sobre el valor de los tonos 
claros y oscuros en la imagen. 

La ventana del histograma muestra la información sobre los tonos de la escala de 
grises en el documento. Esto es verdad sin importar si el documento está en color o 
escala de grises, como las imágenes del color son traducidas digitalmente compo- 
niendo canales separados de color (rojo, verde, y azul, por ejemplo), cada uno con 
valores serán traducidos a su correspondiente en la escala de grises. De nuevo, el 
histograma muestra la información sobre valores de la escala de grises, incluso si 
corresponden a la información del color. Aquí está la versión rápida de cómo leer 
un histograma: 

El gráfico total exhibe la cantidad de información en de la imagen (eje y) en los 
varios niveles de gris desde el negro (en el lado izquierdo del eje x) al blanco (el 
derecho del eje x). Hay 255 niveles de gris en cualquier imagen de 8 bits. Los 
escanners y las cámaras digitales capturan imágenes de 8 bits. Hay escanners pro- 
fesionales y cámaras que capturan imágenes de 16 bits, dando más opciones para 
ajustar la gama tonal; pero para los artistas principiantes de medio digitales, nos 
centraremos en imágenes de 8 bits. 

Mira el histograma abajo, y observa las parts A, B y C: 
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archivo Ed¡t¡ 



gray-trees.ycf-1.0 (escala de grises, 1 capa] 1800x2*100 - GIMP [T][n][V] 

coionar Ver Imagen Capa Colores Herramientas Filtros Ventanas Ayuda 

1° M° H'P m°> BS WH B 




Afofe gwe e/ histograma para esta imagen está acortado en el lado de la sombra. 

A. ¿El histograma comienza y termina al principio (los valores oscuros) y final 
(valores claros) del eje x? Esto significaría que existe realmente información de la 
imagen en áreas de la sombra más oscura y las áreas más claras del punto culmi- 
nante. Si el gráfico parece terminar antes de los bordes de la caja que contiene el 
histograma, "se acorta" el gráfico y no hay información en uno (o ambas) extremos 
del espectro. Hay probablemente una carencia notable del contraste en la imagen si 
se acorta el gráfico. 

B . ¿Dónde en el eje x del gráfico se almacena la mayor parte de la información de 
la imagen? ¿Es decir, donde están los puntos en el gráfico? Esto debe tener sentido 
en términos de que tan oscura o clara parece la imagen total. 

Imagínate en la imagen arriba del histograma que el punto situado a mitad del 
camino es donde el gris del 50% está en la imagen. En esta imagen el punto más 
alto aparece en alguna parte entre la sombra y el gris más negros del 50%. 

C. ¿El histograma tiene espacios donde no existe la información? Esto significa 
que no hay información de la imagen en las áreas donde se esperan los valores gri- 
ses entre blanco y negro. Este es generalmente un resultado de "sobre manipular" 
una imagen con ajustes tonales, en comparación con algo que será notable de una 
imagen escaneada o de las cámaras digitales. Este es a veces un resultado razona- 
ble de aumentar contraste en una imagen, especialmente cuando ciertas áreas son 
particularmente calientes (realces brillantes o exagerados). 

En esta imagen, el histograma no tiene ningún espacio. En el ejercicio siguien- 
te realizaremos cambios al histograma, de Esta manera podrás ver los espacios 
como resultado. 



Ejercicio 2: Comprensión de la ventana del historial 
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Ejercicio 3: Ajuste del histograma 
con los Niveles 



Para este ejercicio terminaremos el primer paso (Niveles) en la imagen que fue uti- 
lizada en el ejercicio dos de escala de grises, arboles_grises.xcf. Entonces utilizare- 
mos la versión del color del archivo, rgb-trees.xcf. 

1 . Haz clic en Colores >Niveles, utilizado para controlar ajustes tonales específi- 
camente en la sombra y destacar ciertas áreas. La ventana de los niveles exhibe el 
histograma que acabamos de ver en el ejercicio anterior. En el lado izquierdo, la 
información tonal se presenta para las áreas de sombra, después los tonos medios, 
seguidos por puntos luminosos en el lado derecho. Al mover el deslizador en los 
niveles (triángulos pequeños justo debajo del gráfico) para corresponder a las áreas 
de la imagen donde hay información sobre los lados izquierdo y derecho del histo- 
grama, reajustando donde ocurre el 100% negro y blanco del 100% en la imagen. 
Las manipulaciones tonales ocurren como resultado de ajustar los números asocia- 
dos a cada deslizador. Si el objetivo es hacer el extracto de la mirada de la imagen 
con alto contraste, empuje los deslizadores hacia uno a. Si el objetivo que la imagen 




parezca verdad comparada a la realidad, los deslizadores se deben utilizar cuidado- 
samente. Ajuste los deslizadores a su gusto y haz clic en Aceptar al terminar. 
La imagen en la izquierda con la ventana de los niveles encima de ella es "antes" 
de la versión del archivo. La imagen a la derecha es la versión del "después". Note 
que las sombras son considerablemente más oscuras y parece que hay más contras- 
te entre las áreas oscuras y claras de la información de la imagen. 

2. Abre cualquier imagen en el modo de color RGB (puedes usar tu propia imagen 
de color o rgb-trees.xcf) para este paso. Mira la ventana del histograma para ver la 
información sobre los valores del escala de grises en la imagen. 

3. Elije RGB del menú desplegable llamado Canal del histograma para ver el 
histograma de cada color que compone el canal RGB. Aunque la imagen se ve en 
color, la escala total de valores en grises debe ser evaluada. Nota los gráficos en la 
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Ejercicio 3: Ajuste del histograma con los Niveles 



ventana del histograma para cada uno de los tres canales separados (pregúntate las 
mismas cosas que usamos para evaluar la escala de grises en el ejercicio dos). 
Mira los histogramas individuales para los canales rojo, verde, y azul. Nota que 
hay más información destacada en el canal rojo, mientras que los tres canales 
parecen estar en el mismo con respecto a las áreas de sombra. También nota que 
el canal rojo tiene mayor información del color a través del eje x mientras que los 
otros dos canales tienen caídas más bruscas hacia los puntos del comienzo y de 
final de las curvas. 

Ejercicio 4: Ajuste de la imagen con 
la ventana de las Curvas 

1 . Haz clic en Colores >Curvas. De nuevo, el histograma se presenta ventana de las 
curvas. Las curvas, como los niveles, se pueden utilizar para ajustar la escala tonal 
dentro de la imagen. 

2. Esta vez, no modifiques el histograma de la composición RGB. En lugar de esto, 
ajusta cada uno de los gráficos rojo, verde, y azul de manera que haya información 
de la imagen donde aparecen las sombras más oscuras y los brillos más claros. 
Para hacer esto, utiliza el menú desplegable de la ventana curvas y selecciona rojo. 
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Ejercicio 4: Ajuste de la imagen con la ventana de las Curvas 
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Cí] Ajustar las curvas de color 
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Ajustes prefijados: 
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Tipo de curva: L** + Suave 
ffl Vista previa 



©Ayuda 


Ofle iniciar 


^Cancelar 


(J¿j Aceptar 



Haz clic en el punto final negro de la línea del gráfico y arrástralo hasta que exista 
información de la imagen. 



[jgj Ajustar las curvas de color 

Background-13 (rgb-trees xcf) 

Ajustes prefijados: 



m 



v * 



Canal: JBjVerde v| Reiniciar el canal [fe] [fe] 
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Vista previa 
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3. Elija el verde del menú desplegable en Canal. Haz clic y arrastra el punto final 
negro de la línea del gráfico hasta el punto que aparezca información de la imagen. 
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4J Cají jüü 

[3^| Ajustar las curvas de color 
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Ajustes prefijados: 
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^Cancelar 
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4. Elija el azul del menú desplegable en Canal. Haz clic y arrastra el punto final 
negro de la línea del gráfico hasta el punto que aparezca información de la imagen. 

5. Haz clic en Aceptar. El ajuste de las Curvas (o de los niveles, cualquier venta- 
na se habría podido utilizar para este último ejercicio) para cada canal de manera 
individual, produce un mejor resultado que simplemente haciendo esto una vez en 
el canal de la composición RGB. 



Ejercicio 5: Definiendo niveles de saturación 

Colores > Tono y Saturación puede ser usado para aumentar o disminuir la satu- 
ración de tonos específicos en la imagen. Este ventana se usa frecuentemente para 
hacer un color más dominante y brillante en una imagen, pero es difícil de notar, si 
la imagen no se está viendo en el 100 por ciento. Incluso entonces, es a veces más 
fácil ver los resultados de este ajuste de la imagen en la impresión final. Si estas 
utilizando el archivo que facilitamos en la página de descarga, puedes seguir los 
ajustes que hicimos en el archivo para demostrar el concepto. Puedes usar cual- 
quier imagen para este ejercicio, pero el color primario va a diferir del nuestro. 

1 . Colores > Tono y Saturación. En el área Seleccione Color Primario para modifi- 
car, presiona el botón redondo de G (green en inglés) para trabajar específicamente 
en las zonas verdes de la imagen. 

2. Utiliza los deslizadores de la saturación y de luminosidad para modificar la ima- 
gen. La imagen abajo muestra nuestros ajustes, pero recuerda que nuestros moni- 
tores pueden estar modificados diferente al tuyo. Es el mejor calcular visualmente 
estos números, en lugar de seguir nuestros ajustes específicos. Recuerda asegurarte 



Ejercicio 5: Definiendo niveles de saturación 
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que la imagen se esté mostrando en el 100 por ciento (utiliza la herramienta de la 
lupa para enfocar hacia adentro o hacia fuera) antes de hacer cualquier ajuste. 

Ejercicio 6: Afiladura de la Imagen 

1. Para este ejercicio, abre cualquier imagen de tu cámara digital, escanner o abre 
el archivo llamado "rgb_trees.xcf ' en Gimp. Todos nuestros archivos están dispo- 
nibles en digital-foundations.net/downloads/floss. 



2. Siempre que una sea escaneada o capturada de manera digital, el proceso de 
convertir digitalmente una realidad tridimensional a un archivo bidimensional, 
hace que el resultado pierda contraste. La Máscara de Desenfoque, que se utiliza 
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generalmente para compensar Esta pérdida. Elije los Filtros > Realzar (enhance) > 
Máscara de Desenfoque. 

Este filtro mira las áreas limitantes donde hay contraste y aumenta el contraste en 
esos pixeles en específico. Asegúrate que el botón de de Vista Previa en la ventana 
de la máscara de desenfoque esté seleccionado. Mira la imagen mientras haces 
clic en el botón de vista previa. Al deseleccionar la vista previa, verás el estado 
"original" de la imagen, mientras que al seleccionarlo, verás la imagen después que 
el filtro sea aplicado. No existen reglas establecidas, más que la relación entre las 
opciones en la ventana y el tamaño del archivo. Mientras mayor sea el tamaño del 
archivo, mayor sera el umbral, radio y cantidad. Con un archivo de tamaño más 
pequeño (cualquier tamaño menor a 30 megas), probablemente tendrás un umbral 
en 0, un radio menor a 1 .0 y el porcentaje será ajustado visualmente entre .20 y 
1.00. Notarás cuando te habrás excedido, ya que la imagen resultante será una que 
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Ejercicio 6: Afiladura de la Imagen 
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Sobreposición y Collage 

En el medio de los 1800s, Hipólito Bayard fue uno de los primeros fotógrafos en 
crear una impresión a base de combinación conocido como positivado directo, 
donde dos imágenes separadas se yuxtaponen en una sola impresión fotográfica. 




Autoretrato Como Un Hombre Ahogado, 1840, Hipólito Bayard, positivado direc- 
to. 

Siguiendo esta tradición de las impresiones producto de la combinación combi- 
nación, cubistas como Pablo Picasso y de Georges Braque comenzaron a agregar 
fotografías que encontraban, materiales impresos y otros elementos visuales a sus 
composiciones. Llamaron a esta técnica Collage, de la palabra francesa "pegar". 

En los años 20, artistas del DDadaístasismo y el Constructivismo exploraron 
esta técnica del collage en su trabajo. Cortaron y pegaron fotografías, sus propias 
imágenes y varios elementos ipmresos juntos para formar collages "anti-estéticos" 
que desafiaban al espectador decifrar múltiples mensajes dentro de la composición 
final. El constructor de EL Lissitzky es un ejemplo de este tipo de trabajo. El au- 
toretrato de Lissitzky combina su cabeza con fragmentos de maquinaria, junto con 
una mano que se ha interpretado como la mano de dios, pasando sobre su cara. 
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Sobreposición y Collage 




El Constructor, 1925, EL Lissitzky, Autoretrato en montaje fotográfico. 

Las impresiones de Lissitzky y de Bayard emplean diversos métodos de produc- 
ción artística. La impresión de combinaciones fue hecha durante el proceso de 
impresión fotográfico, mientras que el foto montaje combina varios materiales 
impresos con el pegamento. Si Gimp hubiera sido inventado a principio de 1900, 
los Dadaístas y Constructivistas lo habrían utilizado como su material adhesivo. 

Antes de Comenzar 

Necesitarás descargar los archivos manoOl .jpg, mano02.jpg, arm.xcf, back.xcf , ear. 
xcf, head.xcf, shoes.xcf, y torso .xcf de http://www.digital-foundations.net/down- 
loads/floss: 

Ejercicio 1: Usando las capas para crear 
una doble-exposición 

En la cámara, una exposición doble requiere la liberación del obturador para crear 
una fotografía, luego liberar el obturador otra vez para crear otra fotografía encima 
primera. Un ejemplo de este proceso se puede considerar en la imagen de Henry 
Van der Weyde del agente Richard Mansfield como el Dr. Jekyll y Sr. Hyde. 
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En Gimp, la doble-exposición se puede hacer poniendo dos imágenes en capas 
separadas, para luego ajustar el modo de combinación de la capa superior. Hemos 
proporcionado dos imágenes, pero puedes tomar dos fotografías con una cámara 
digital o escanear dos imágenes que muestran tiempo, sueño, paranoia, esquizo- 
frenia, dualidad, etc. La doble-exposición es usada con frecuencia para expresar 
dualidad o el paso del tiempo (ver fotografías de Duane Michaels). 

1 . Crea un nuevo documento usando Archivo > Nuevo. Fija la anchura y la altura a 
12 por 10 pulgadas. Guárdalo como doble-exposicion. 
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72 DPI también es conocido como "resolución de la pantalla." El trabajo en 72 
DPI es apropiado para cualquier contenido que aparezcan en una pantalla y que no 
sea impreso. 

2. Abre manoOl .jpg de http://www.digital-foundations.net/downloads/floss. 



Hay varias maneras de copiar la mano en el nuevo documento que estamos usan- 
do para hacer la doble-exposición. Un método es arrastrar la capa de la mano (en 
este caso, la capa Fondo es la capa de la mano) en un documento diferente. ¡Ten 
cuidado! No hagas clic la imagen de la mano en la ventana principal. Mira la parte 
derecha en la ventana de Capas. Hay una vista previa de la imagen en pequeño 
tamaño y la palabra Fondo. Esta es la capa real donde la imagen de la mano está 
almacenada. Haz clic en la pequeña imagen en la ventana de las capas y arrástrela 
a través a la ventana en blanco del nuevo documento. Cuando presionas el botón 
de ratón, la mano aparece en la nueva ventana. 



Sin nombre-1.0 (RGB, 1 capa) 864x720 - GIMP 

Ver Jmagen Capa Colares Herramientas Filtros Venta 
i i i l'i , , i Pi , i i K i i i P, i i , El i i , I' "i , , 



gas 



Mi i i Mi ii I 1 ?! ii Mi ii I 1 ». 3 



Archivo Editar Seleccio 
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nagen Capa Colores Herramientas Filtre 

, i , N°, , i _,_, , i , ím¡ ,j , i _,_,_ , _N°j , 





Consejo: La mano pudo haber sido copiada y pegada usando Seleccionar > Se- 
leccionar Todo, seguido de Editar > Copia, luego se hace clic en el archivo nuevo 
para hacer Editar > Pegar. 
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Nota que cuando la mano se arrastra al documento de la doble-exposición aparece 
muy grande. El archivo de la mano tiene más pixeles que el archivo de la doble- 
exposición. Hicimos Esto a propósito por dos razones: (1) para demostrar que el 
número de pixeles en un documento afecta de manera notable la manera en que 
vemos un archivo en Gimp, y (2) distinguir la mano, originalmente una foto digital 
(la cámara que utilizamos almacenó una cantidad de información significativa), 
del archivo de trabajo que generamos de Archivo > Nuevo. Es posible crear un un 
nuevo archivo con un valor mayor de resolución, pero para ejercicios que no van 
a ser impresos, es más rápido trabajar con un archivo que tenga una resolución no 
mayor a la de la pantalla. Mayor la resolución, mayor el tamaño del archivo; y 
mientras mayor sea el tamaño del archivo, se necesita más poder de procesador de 
la computadora que tiende a hacer el proceso de más lento. 

3. En la ventana de las capas, haz doble clic el nombre Copia de Fondo y cambia 
el nombre a manoOl . Nota la capa del fondo debajo de la capa manoOl . La capa 
del fondo es una capa blanca que no contiene ninguna imagen, puesta por debajo 
la imagen de la mano. La capa del fondo es la primera capa que Gimp crea cuando 
se genera un nuevo documento. Al trasladar la mano al nuevo documento, creamos 
una nueva capa. Haz clic una vez en capa del fondo en la ventana de las capas y 
después haz clic en el icono del bote de basura en la esquina derecha inferior de la 
ventana de las capas. Ahora la capa del fondo no estará en la ventana de capas y la 
capa manoO 1 se encontrará activa (indicado por el fondo amarillo) . Para escalar la 
mano de modo que quepa en el documento, haz clic en el icono de la herramienta 
de escalado en la caja de herramientas. Con la herramienta de escalado seleccio- 
nada, usted puede hacer clic y arrastrar en cualquier esquina de la capa de la mano 
para cambiar su tamaño. Antes de que empieces a escalar la mano, hecha una 
ojeada a las opciones de la herramienta que aparecen en la parte inferior de la caja 
de herramientas. Haz clic la caja que se encuentra al lado de Mantener Proporción. 
No importa de qué tamaño hagas la mano, mantendrá sus proporciones originales. 
Escala la mano hasta que quepa en el marco y pulsa la tecla Return. 
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4. Abre mano02.jpg de http://www.digital-foundations.net/downloads/floss/ y 
traslada la imagen al documento de la doble-exposición. Nombra la nueva capa 
mano02. Nota que esta mano ya ha sido escalada para ti. Mientras que la segunda 
mano sigue estando activa en la ventana de capas, selecciona la herramienta de 
volteo de la caja de herramientas. En la sección de las opciones de la herramienta, 
puedes elegir cómo mover de un lado a otro el objeto. Haz click para activar la 
opción Horizontal, y haz clic la imagen. La mano se volteará, y nota que no todo el 
documento se verá afectado Para confirmar que la transformación ocurrió solamen- 
te en una capa, haz clic el icono del ojo al lado de la capa mano02 en la ventana de 
las capas. El icono del ojo activa la visibilidad de una capa, permitiendo ver lo que 
se encuentra debajo de un layer. Haz clic en el icono del ojo para activar y desacti- 
var la visibilidad de cada capa y entender Este concepto. 
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5. Selecciona la capa mano02. Utiliza el menú desplegable de los modos de la capa 
en el área superior de la ventana de la capa para elegir Multiplicar. Deja la capa 
manoOl en modo normal. Ahora las dos imágenes aparecen como sola imagen 
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compuesta. Utiliza la herramienta Mover para mover cada una de las capas y hacer 
que los dedos y las manos se superpongan de manera que encuentres de tu agra- 
do. Sólo puedes mover la capa que esté seleccionada en la ventana de capas, de 
manera que debes seleccionar cualquiera que sea la capa que quieras mover antes 
de hacer clic y arrastrarla con el ratón. Los modos de combinación como Normal y 
Multiplicar, definen como las capas interactúan entre ellas. Continuaremos explo- 
rando estas opciones en el tercer ejercicio. 

Ejercicio 2: Cortando y Ajustando 
la Tonalidad 




Esta ilustración muestra los resultados de los ejercicios uno y dos. 

1 . Haz clic en la herramienta de recorte en la caja de herramientas y note las opcio- 
nes para esta herramienta. Chequea la caja al lado de Fijo: Proporción de Aspecto. 
En la opción Tamaño, escribe "6 en" en la caja de la anchura y "9 en" en la caja de 
la altura. Ahora, dibuja una caja de corte alrededor del área del documento donde 
las dos capas se superponen. Mientras arrastras el ratón, él área de selección de 
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corte deberá adaptarse a la forma rectangular en la proporción 6:9. Termina de 
cortar presionando la tecla Return o Enter en tu teclado. 
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2. Selecciona Colores > Tono y Saturación. 



:GB, 2 capas) 664x720 - GIMP 



- |5l Balance de color, 
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3. En la ventana de la Tonalidad- Saturación, utiliza el deslizador de la tonalidad 
para crear un tono de color cian sobre la imagen. Con cada cambio que haces, 
verás como la imagen se ve afectada en la ventana de la imagen. Ninguno de los 
cambios se hará efectivo hasta que preiones la tecla Aceptar. Los controles de 
Tonalidad-Saturación solo afectan una capa a la vez. Presiona Aceptar y seleccio- 
na la siguiente capa en la ventana de capas para repetir el proceso. 
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Ajustar el tono / luminosidad / saturación 

Copia de Fondo-7 [Sin nombre) 



Ajustes prefijados: 
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Seleccione el color primario para modificar 
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Ejercicios 3 y 4: Cadáver exquisito (en dos 
partes) 

El "cadáver exquisito" es un juego de sala que los Surrealistas desarrollaron en 
1925. En este juego, cada jugador presenta imágenes (dibujos, pinturas, foto- 
grafías) de cabezas, torsos, y piernas, que son combinadas para poducir nuevos 
cuerpos de manera sorpresiva. Hemos jugado Este juego con estudiantes usando 
imágenes de cada uno que hemos hecho en la clase con una cámara digial, cómo 
también hemos usado imágenes de la cultura pop conseguidas en la red. Mezclan- 
do partes del cuerpo de celebridades con personajes políticos pueden provocar una 
discusión profunda. Imágenes de partes del cuerpo están disponibles en la página 
de descarga que preparamos para ti, pero es más divertido hacer Este ejercicio con 
fotografías de familiares y amigos. 



Ejercicio 3: Creando y Manipulando Capas 

1. Trabajaremos en el archivo de la doble-exposición que acabamos de crear, así 
que guarda el archivo como cadáver-exquisito .xcf. Tu archivo debería verse pareci- 
do a la ilustración. 
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2. Manten cadáver-exquisito .xcf abierto y utiliza Archivo > Abier en Gimp para 
abrir todos los documentos usados en este ejercicio (descarga los archivos siguien- 
tes arm.xcf, back.xcf , ear.xcf, head.xcf, shoes.xcf, y torso .xcf, de http://www. 
digital-foundations .net/downloads/floss) . 
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3. Mueve a todas las partes del cuerpo al documento del cadáver exquisito, de 
igual manera que trasladamos las manos al documento de la doble-exposición en 
el ejercicio 1 . Una vez que todas las piezas estén en capas separadas en el docu- 
mento del cadáver-exquisito, cambia el nombre de todas las capas para indicar qué 
partes del cuerpo están en la capa. Utiliza el icono del ojo en la ventana de la capa 
para ocultar y para demostrar la capa. Este es un método rápido de determinar qué 
imagen está en la capa. 



4J CálpilS, CüJlüJiS, ¡1±Ü¿I3j !> [t 


| *les.xcf-l |v 


Auto 




S 


■ 


& 


<5 




Cap* 


s 


a 


Modo: 


Normal v 




, — , r 


i i 


Opacidad: 


i ^_nJ |10Í 




Bloquear: □ | 




<a> 




H oreja 




<B> 




H cabeza 




&> 




QJ torso 




<a> 


■ zapatos 




<B> 




V espalda 




<a> 


H brazo derech 




<a> 


H brazo izquier 




<B> 




c 


1 mano02 


- 


<BE> 




manoOl 


I-I m 1 


T^" 




m ♦ • » < 


9 


Hl 


II 


n 




Pinc 


eles 


Circle (ID (13 x 13) 


A A A A 


- 


■ ■ 




A A A A 




•!•]•-•-• 


. 


_ 






T 


Espaciado: q_ 


I] 




a m ■ 


® 6 





4.Haz clic en una capa y arrástrela sobre o debajo de otra capa. El orden de las ca- 
pas en la ventana de la capa se refiere al orden de amontonamiento. Esto determina 
qué imagen aparece en el primer plano o más cerca a los ojos del espectador y qué 
imágenes bajan al fondo. Organiza las capas de modo que aparezcan como en la 
ilustración de arriba. ¡Nota que nuestra ventana de capas tiene un brazo izquierdo 
y derecho! Nombramos nuestro primer brazo, brazo derecho después utilizamos 
el menú de la Capa > Duplicar la capa. . . para nombrar la capa duplicada brazo 
izquierdo. Utiliza la herramienta de volteo como hicimos en el ejercicio anterior, 
para modificar la apariencia del brazo. 
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5. haz clic cada capa para activarla, después utiliza la herramienta Mover para 
reposicionar la capa y la herramienta de escalado para cambiar el tamaño. Algunas 
capas necesitarán ser rescalados si quieres que tu imagen se vea como la nuestra. 
Recuerda mantener la opción de Mantener Proporción acitva en todas las capas a 
medida que las vas modificando. Es seguro reducir el tamaño de una imagen en 
Gimp, sin embargo, no es buena idea aumentar el tamaño de una imagen (o hacer 
nuestra imagen más grande de lo que es) ya que Esto agregará información de 
"píxels malos" a la imagen. 
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Ejercicio 4: Agregando ajustes 
a algunas capas 




wmm 

Esta ilustración muestra los resultados de los ejercicios 3 y 4. 

En este ejercicio queremos agregar todas las capas del cadáver a la composición 
hecha anterior. 

1 . Primero, haz invisibles las dos capas de las manos de los primeros dos ejercicios 
haciendo clic en el icono del ojo. Ahora, ve al Menú de Capas y selecciona Com- 
binar las Capas Visibles. 
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2. Haz clic en la capa que resultó de combinar las anteriores para activarla. Asígna- 
le el modo de mezcla del multiplicar del menú desplegable del modo en la ventana 
de las capas. Utiliza la opción de la Tonalidad-Saturación de colores para darle un 
tono general diferente al de la capa de las manos. La imagen final se parecerá a la 
siguiente: 
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Ejercicio 4: Agregando ajustes a algunas capas 1 45 



Repetición y Reproducción 

Las herramientas de digitales motivan a productores de contenido a parodiar tanto 
en la pantalla como fuera de ella. Los productores de medios, tienen la capacidad 
de cambiar virtualmente el aspecto cualquier cosa con herramientas tales como 
copiar, pegar, enmascarar y clonar. Entonces la pregunta es la siguiente: ¿dada 
la oportunidad de cambiar cualquier imagen, mensaje, o texto, por donde empe- 
zarías? La respuesta dependerá de tus intereses, pero generalmente emerge de la 
tensión política. En otras palabras, los oprimidos pueden reclamar mensajes del 
paradigma dominante al alterar el simbolismo en las palabras o imágenes en el 
mundo físico y/o digital. Estos mensajes pueden aparecer en museos, en las calles 
de la ciudad o en Ciberespacio. La parte "subversiva" de la creación del mensaje 
es la manera en la cual la estética de medios alterados depende de la comprensión 
visual e intelectual de la cultura dominante previo a la confrontación de medio. El 
Billbord Liberation Front (Frente de Liberación de la Cartelera, si lo traducimos al 
español) y The Anti-Advertising Agency (Agencia Anti-Propaganda) crean trabajos 
que ilustran esta idea. No es de gran sorpresa que este método contra cultural y ju- 
guetón de protesta ha sido tomado por la industria de la Publicidad. En No Logo, 
Naomi Klein muestra como publicistas usan métodos comunes a los usados por 
artistas contemporáneos para crear conciencia de marca. Ella escribe, "La constan- 
te amenaza de Pepsi de proyectar su logotipo en la superficie de la luna no ha sido 
aún materializado, pero Mattel si pintó una calle completa en Salford, Inglaterra, 
' de un tono de chicle brillante y chillón' rosada -casas, porches, árboles, calles, 
aceras, perros y automóviles fueron todos accesorios en la celebración televisada 
del Mes Rosado de Barbie. Barbie es una pequeña parte de los $30 millones de la 
creciente industria de 'comunicación experiencial', la frase usada ahora para abar- 
car el montaje de piezas marcadas de arte interpretativo y otro tipo de 'happenings' 
(de la palabra inglesa que significa evento, ocurrencia, suceso) " (Reivsa No Logo, 
Naomi Klein, Nueva York: Picador 9-12.) 

Del The Billboard Liberation Front Manifestó: "Y así vemos, el anuncio define 
nuestro mundo, creando tanto el foco en "imagen" y la cultura de consumo que 
atraen e inspiran en última instancia a todos los individuos deseosos de la comu- 
nicación a su hombre de una manera profunda. Está claro que Él quién controla el 
Anuncio habla con la voz de nuestra edad." (Jack Napier y John Thomas) lee el 
manifiesto entero en: http://www.billboardliberation.com/manifesto.html 
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IMAGEN: Productos de la gente 123, Agencia Anti-Propaganda 

http://peopleproducts 1 23 .com/ 

La agencia Anti-Propaganda crea medios subversivos en oposición al papel de la 
publicidad en la sociedad contemporánea. Muchos de sus proyectos son participad - 
vos, así que significa que los espectadores se hacen "autores" o fabricantes de arte. 
En los productos de la gente 123, los participantes descarga paquetes de diseño que 
muestran imágenes e información sobre los trabajadores responsables de producir 
el producto consumible. Los paquetes de diseño deben ser impresos por el par- 
ticipante, ser empaquetados de nuevo, y "lanzarlos " en el almacén en donde un 
comprador modesto compraría el producto contenido nuevo paquete informativo. 
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Resultados de los ejercicios del capítulo 10 




Comenzamos con una imagen del primer grupo completamente femenino que 
NASA envió al espacio. 




También, utilizaremos una imagen cortada de Amelia Earhart. 
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En la imagen final, la cabeza de Amelia Earhart substituye la cabeza en la figura de 
centro del equipo de la NASA y la imagen se presentará en blanco y negro. 

Antes de comenzar: 

Descarga los siguientes archivos de Wikimedia Commons: 

http://commons.wikimedia.Org/wiki/File:C-130_-_First_all_female_crew.jpg 
http://commons.wikimedia.org/wiki/File: Amelia_Earhart_1937_GPN-2002- 
000211.jpg 

(Nosotros cortamos la fotos de Amelia, y usamos sólo el retrato de su cabeza.) 



Ejercicio 1: Substituya la parte de una 
imagen usando la herramienta de clonado 

En este ejercicio, usaremos dos imágenes en el dominio público del gobierno de 
los E.E.U.U.: una imagen histórica de Amelia Earhart y una imagen del primer 
grupo de aviación completamente femenino. 
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1. Abre el archivo C-130_-_First_all_female_crew.jpg en Gimp. Enfoca en la figu- 
ra central del equipo. Comenzaremos con sustituir su cabeza por una muestra de la 
bandera. Haz una selección rectangular alrededor de su cabeza con la herramienta 
de la selección de rectángulos. 
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2. Mientras cualquier herramienta de selección se encuentre activa, al colocar el 
cursor dentro del área seleccionada, la herramienta cambia de una flecha blanca 
con un pequeño rectángulo de selección. Haz clic y arrastra la selección rectangu- 
lar sobre la figura de la cabeza - sólo estás moviendo la selección. Ninguna parte 
de la imagen estaá siendo movida. 




Pasted LayerU.8 MB) 

3. Copia la bandera de la capa del fondo y pegúala a una nueva capa. Elija Editar 
> Copiar, seguido de Editar> Pegar para crear una capa nueva. Nombra la nueva 
capa "bandera". 
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ited Layer [4.7 MB) 

4. La cabeza ha sido reemplazada por una muestra de la bandera en una nueva 
capa. La herramienta clonado se utiliza para reemplazar pequeñas áreas de una 
capa con una muestra de otra imagen. La herramienta clonado se aplica con una 
brocha. Usando una brocha suave harás que la muestra reproducida parezca mez- 
clarse en la imagen original aunque hagamos nuestra clonación en una capa nueva. 
Ten cuidado con el uso y aplicación de la herramienta clonado. La brocha suave 
crea un poco de desenfoque en la imagen. Una pequeña cantidad desenfoque es 
necesaria para que la muestra se mezcle, pero haciendo clic en la brocha suave de 
manera repetitiva resultará en una imagen con un área desenfocada. El propósito 
de la clonación es crear a un engaño inidentificable en la imagen. Crear un área 
desenfocada en la imagen hará que la atención del espectador vaya a esa área. 
¡Para lograr este engaño, la copia debe ser hecha de una manera tal que el especta- 
dor sea engañado ! 

Elije la herramienta de clonación de la caja de herramientas. Fija la brocha de unos 
10 a 20 pixeles. Chequea que Imagen esté seleccionado en la parte Origen de las 
opciones de la herramienta. Luego crea una nueva capa llamada clon. 
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5. Ahora para la parte más importante de este ejercicio - prueba partes de la bande- 
ra para mezclar las áreas alrededor de los bordes donde es obvia la manipulación 
de la imagen con el copiado y pegado. La herramienta de clonado requiere que la 
parte de una imagen sea probada antes de que se aplique a otra parte del documen- 
to. Prueba parte de la bandera cerca del borde entre el blanco y el rojo prsionando 
la tecla Control y haciendo clic en esa área (esto puede ser llamado como Control- 
Clic). Luego coloca el ratón sobre la esquina donde la bandera pegada necesita ser 
mezclada y haz clic una sola vez para cubrirlo con una suave muestra de la brocha. 
Pon atención al trabajo de la brocha. Determina si con el primer clic se mezcla o 
no, mirando los valores de alrededor. Decide si tu nueva muestra se está mezclan- 
do en la imagen y pasa desapercibida. Si no se está mezclando de manera correcta, 
ve al área siguiente. Siempre tienes que hacer Control-Clic para crear una muestra 
nueva antes de usar la brocha. Si el primer clic no se mezcla perfectamente (pro- 
bablemente nolo hizo - toma un poco de tiempo acostumbrarse), usa Control+Z 
para deshacer el último paso e inténtalo de nuevo. 

Trabaja alrededor de los bordes creando una nueva muestra de la bandera (Control- 
Clic) y luego haciendo cilc con la brocha para aplicar la clonación. ¡Control+Z 
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será usado con frecuencia en este proceso! Nosotros terminamos la clonación luego 
de alrededor de 30 clics con el ratón. 




6. Mira la capa de la copia apagando los iconos del ojo de todas las otras capas. 
Aquí está como se ve nuestra capa cuando terminamos. 




Ejercicio 2: Agrega a Amelia Earhart a 
la imagen del equipo 

1 . Debido a que la imagen de Amelia Earhart era originalmente una fotografía 
blanco y negro, debemos cambiar la imagen del equipo de la fuerza aérea a escala 
de grises. Selecciona la capa del fondo en la ventana de las capas. Seleccione Colo- 
res > Desaturar. Haz clic en Aceptar en la ventana que se abre. Después seleccione 
las capas bandera y clon y repite este proceso. 
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2. Abre la imagen de Amelia Earhart, selecciona su cabeza y cuello con la herra- 
mienta selección de retángulos y elije Editar > Copiar. Selecciona la imagen de 
los soldados, Editar > Pegar. Usa la herramienta de escalado mientras presionas la 
tecla Control para cambiar el tamaño de la cabeza de Amelia Earhart, de manera 
que la proporción corresponda con la del cuerpo. Nombra la nueva capa Amelia. 




Ejercicio 3: Agrega una máscara de capas 

Agregua una máscara sobre una imagen para esconder parte de ella. Las máscaras 
no suprimen ni alteran datos de imagen, simplemente ocultan o muestran partes de 
imágenes. Las máscaras funcionan en el negro (oculto), el blanco (revelado), y los 
tonos del gris (transparente, parcialmente ocultado). Usaremos una capa de másca- 
ra en la capa de Amelia para mezclarla en el nuevo fondo. 

1 . Crea una máscara de capas en la capa de Amelia. Haz clic con el botón derecho 
del ratón en la capa de Amelia y selecciona añadir máscara de capas del menú 
desplegable que se abre. Esta máscara será utilizada para ocultar las partes de la 
imagen alrededor de la cabeza de Amelia. Nota que la capa ahora tiene un icono 
para la imagen y un icono para la máscara. La máscara está actualmente activa - 
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hay un marco alrededor del icono de la máscara. 

2. Elije la herramienta Pincel en la caja de herramientas y asegúrate de que los 
colores por defecto sestén cargados en el fondo y primer plano (el negro es el color 
del primero plano y el blanco es el color de fondo) haiciendo clic en el pequeño 
icono negro/blanco de la viruta del color en el centro de la caja de herramientas. 

3. Nota que el icono para la máscara es blanco en la ventana de las capas. Puesto 
que todo en la capa se revela, la máscara entera es blanca. Utiliza la herramienta 
Pincel con la pintura negra en la máscara para ocultar el fondo. Si te equivocas, 
cambia a la pintura blanca para recuperar las partes ocultadas de la imagen. Practi- 
ca pintando con la pintura blanca y negra. Pinta con diversos tamaños de pinceles 
y nota que pasa con un pincel suave o uno duro, o con usando varios pinceles con 
diferentes opacidades. 

Utilizamos un pincel suave para el área de fondo y lo mantuvimos lejos de la 
cabeza de Amelia. Mientras que pintamos más cerca de su cabello, redujimos la 
opacidad del pincel a un 40% en las opciones de la herramienta. En una opacidad 
reducida, hacer clic varias veces cerca de su abeza con pintura negra, remueve el 
fondo mientras que evita que el cabello se corte de manera poco natural. 




Ejercicio 4: Quemado e Iluminado 

El paso siguiente, es corregir los tonos de piel de Amelia. Antes de hacer esto, 
deberás hacer clic de nuevo en la porción del contenido - dejando la máscara - en 
la capa de Amelia. GIMP indica qué parte de la capa estas trabajando enmarcando 
su icono en la ventana de capas. La barra del título del documento también refleja 
él área que está actualmente activa. Si la máscara está activa, la herramienta de 
marcado a fuego o quemado usada en el próximo paso sólo afectará la máscara, así 
que ¡ asegúrate que el contenido de Amelia esté activo ! . 



1 . Nota que la fotografía de Amelia fue tomada al aire libre, mientras que el equipo 
de la fuerza aérea estaban dentro de un espacio cerrado a la hora de la fotografía. 
La luz áspera en la cara de Amelia es perceptiblemente diferente de la luz en las 
caras de las aviadoras. Haremos un ajuste rápido al tono de piel de Amelia para 
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crear un collage más realista con la herramienta de de marcado a fuego o quemado. 
El quemado y el iluminado son manipulaciones fotográficas nativas a las prácticas 
tradicionales del cuarto oscuro. En el cuarto oscuro, el tiempo de exposición adi- 
cional aumenta la cantidad de luz que golpea el papel. Esto se puede hacer selecti- 
vamente, teniendo por resultado un área "quemada" de la imagen. La quema obs- 
curece el valor de esa porción de la impresión. La luz se puede también bloquear 
durante la exposición esquivando sobre áreas de la imagen donde están demasiado 
oscuros los valores tonales con una pequeña herramienta, dando por resultado un 
área aligerada de la impresión. 

Utiliza la herramienta de quemado a fuego con un grupo de pinceladas con una 
exposición de alrededor 10%. Pinta rápidamente sobre la cara de Amelia con la 
herramienta de quemado. Cada vez que hagas clic con el ratón, los tonos se oscu- 
recerán. 




2. Repita el paso 1 dos veces, una vez con las opciones de la herramienta fijadas a 
las sombras y una vez como la herramienta de la quemadura funciona en los puntos 
culminantes. 



Ejercicio 4: Quemado e Iluminado 
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En el capítulo 9 nos referimos al autoretratoo de Hippolyte Bayard como un hom- 
bre ahogado de 1840, como la primera impresión hecha a partir de la combinación. 
La historia de la manipulación fotográfica se extiende casi desde las primeras imá- 
genes fotográficas. Las herramientas de Digitales tales como Gimp se utilizan para 
las manipulaciones pequeñas y grandes de la imagen, tales como el ajustes leves en 
la gama tonal o la creación de una realidad alternativa. 

Nota: Mira Este enlace de un una exhibición de un grupo en en año 2000 en la 
Galería Laurence Miller llamada Realidades Alternativas. 

http://www.laurencemillergallery.com/alternativerealities.htm 

Nota: El código de NPAA de los éticas se puede encontrar aquí: http://www.nppa. 

org/professional_development/self-training_resources/eadp_report/digital_manipu- 

lation.html 

En ciertas situaciones, el artista digital debe ser conscientemente ético de la ma- 
nipulación que ocurre en tales usos. La Asociación Nacional de los Fotógrafos de 
Prensa (NPPA, son las siglas en inglés de Esta organización) mantiene un código 
de ética que estudiantes y los profesionales del periodismo deben respetar. Los 
periodistas y los fotógrafos de las noticias se esfuerzan por ser exactos en en su 
reportaje basado en imágenes. Existen casos históricos de la manipulación digital 
usados frecuentemente para demostrar e ilustrar las violaciones del código de ética 
de NPPA (puedes ver la imagen de las pirámides de National Geographic de 1982). 

La referencia visual de la Velada Dada del Dadaísta Kurt Schwitters demuestra 
que la tipografía puede ser también manipulada en la construcción de un collage. 
Mientras que ninguno de estos trabajos visuales fueron creados en un ambiente 
digital (ambos fueron hechos antes del advenimiento de herramientas digitales), las 
realidades alternas y las manipulaciones se crean a menudo con programas infor- 
máticos. 

Dentro de los ejercicios de este capítulo, nos centraremos no sólo en la manipula- 
ción de una imagen, pero también en el trabajo en un método no destructivo. Para 
corregir el archivo digital de manera no destructiva debemos trabajar de una mane- 
ra tal que se preserve la imagen original. Cualquier corrección o las modificación 
al archivo original se hace en capas separadas o en los canales alfa, que explorare- 
mos con más detenimiento en el ejercicio 2. 
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Dalí Atómico, Philippe Halsman, 1948. Esta versión de la fotografía muestra un 
elemento faltante en la impresión final: las manos que sostienen la silla. También, 
la impresión final contiene una de las pinturas de Dali ("Leda Atómica ") en el 
marco del cabillete. 
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Velada de Dada, Kurt Schwitters, 1922 
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Resultados de los ejercicios del capítulo 11 




Cada ejercicio en el Capítulo 11 se construye en el mismo archivo para crear la 
imagen final en el ejercicio 4. 



Ejercicio 1: Usando máscaras rápidas 
y canales alfa 

1 . En Gimp, usa Archivo > Abrir para abrir el archivo de Salvador Dali sosteniendo 
un gato. 

2. Utiliza la herramienta de selección libre para seleccionar la parte izquierda del 
bigote de Dali. La herramienta de selección libre se puede utilizar para dibujar 
selecciones como si dibujaras con un lápiz. Haz clic y arrastra con la herramienta 
de selección libre el principio del bigote hasta el final alrededor de su contorno. La 
selección se completa cuando el ratón se encuentra de vuelta en el punto donde se 
presionó por primera vez el ratón. Tu selección no será una línea perfecta del bi- 
gote. Modificaremos la selección en el próximo paso. La herramienta de selección 
libre siver con el propósicto de hacer una máscara rápida de una selección, que 
puede ser utilizada como punto de partida para máscaras y refinamiento de selec- 
ciones. 
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3 . Activa la máscara rápida seleccionando Shift+Q en el telclado o haciendo clic 
en el icono de activar máscara rápida en la esquina izquierda inferior de la ventana 
de la imagen.. La máscara rápida cambiará todas las áreas de la imagen que no se 
seleccionen al blanco. Las áreas seleccionadas llegan a ser obviamente visibles. La 
máscara rápida es básicamente otra manera de modificar una selección. Aprender 
a usar la máscara rápida, te ayudará a entender mejor el concepto de máscaras. 
Las máscaras definen qué áreas son visibles y qué áreas de la imagen son invisi- 
bles. Las máscaras no suprimen las áreas de la imagen (esta es la razón por la cual 
hemos clasificado esto como "no destructivo "), ellas se utilizan simplemente para 
ocultar o para demostrar partes de imágenes. Puesto que las máscaras son para 
ocultar o que mostrar áreas de la imagen (o mostrar parcialmente), funcionan en 
blanco y negro y crean la transparencia con los tonos de gris. 




1 {9,8 MiB) 



Ejercicio 1 : Usando máscaras rápidas y canales alfa 
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4. Elija la herramienta del pincel. 

En cualquier máscara, el color negro ocultará la parte de la imagen y el color 
blanco revelará la parte de la imagen. El recubrimiento blanco en la máscara rápida 
es usado como guía, así que puedes ver fácilmente donde has pintado con negro 
o blanco para agregar o quitar la máscara. Pintar con pintura blanca en la máscara 
rápida quitará las partes blancas (piezas enmascaradas). Esto agregará partes de 
la imagen al área de la selección. Pintar con la pintura negra en la máscara rápida 
agregará partes blancas. Es decir agregará a la máscara y restará del área de la 
selección. 

Practica pintando con la pintura blanca y negra. Pinta con los diversos pinceles y 
nota que qué sucede con un pincel suave o duro, o con un sistema de pinceles de 
diversa opacidad. Mientras pintas, usa Shift+Q para salir del modo de máscara 
rápida. Verás la selección resultante. Presiona Shift+Q otra vez para entrar en el 
modo de máscara rápida de nuevo y continuar pintando para modificar la máscara. 




El pintado final en máscara rápida y la selección resultante en modo estándar de 
edición. 
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5. Sal de la máscara rápida y vuelva al modo estándar de edición una vez termines 
de modificar la selección en modo de máscara rápida. Tu selección debería coinci- 
dir de manera cercana con el contorno del bigote. 




Esta es una imagen de nuestra selección hecha con la herramienta de selección 
libre antes de la máscara rápida y de la selección final después de hacer modifica- 
ciones con la herramienta del pincel en la máscara rápida. 



6. Elije Seleccionar > Guardar en Canal y nombra el nuevo canal bigote izquierdo. 
Haz clic en Aceptar. 
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7. Cuando se guarda una selección se convierte en un canal alfa. Un canal alfa es 
un canal en escala de grises que define qué partes de una imagen son visibles. To- 
dos los canales pueden ser vistos haciendo clic en sus nombres en la ventana de los 
canales. Haz clic en la lengüeta de los canales en la ventana de las capas, después 
haz clic en el nombre , bigote izquierdo. El archivo ahora muestra el canal alfa bi- 
gote izquierdo. Todo lo que no se incluye en la máscara es negro en un fondo gris. 




8. Haz clic de nuevo en el canal gris para volver al modo estándar de edición. De- 
selecciona el lado izquierdo del bigote eligiendo el menú Selección > Nada. 

9. Utiliza Archivo > Guardar como, para salvarlo como un archivo Gimp XCF. 
Nosotoros nombramos nuestro archivo daligato.xcf. 



Ejercicio 2: Guardando una selección a una 
capa de máscara 

1. Comienza con la selección del lado izquierdo del bigote. 

2. Crea una nueva capa (Shift+Control+N). Copia y pega la mitad del bigote en 
la nueva capa eligiendo Edición > Copiar de la capa del fondo Edición> Pegar en 
nueva capa. 

3. Renombra tus capas. Nosotros renombramos la capa de fondo archivo original y 
la nueva capa bigote izquierdo. 
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4. Usa la herramienta Mover para colocar el bigote en el lado izquierdo de la cara 
del gato. Luego usa la herramienta de la rotación o el Shift+R para girar el bigote a 
la izquierda. 

Ten cuidado: Si la capa bigote izquierdo no está activa (destacada) ppuede que ha- 
yas movido la capa que tiene el archivo original. Asegúrate que la capa en la que 
quieres trabajar se encuentre activa. 

Agregaremos un ajuste final para el contraste en el final de este ejercicio, pero pue- 
des agregar por ahora un ajuste con los niveles para hacer el bigote más oscuro. 
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5. Ahora agregaremos una máscara a la capa bigote izquierdo para controlar mejor 
cómo la capa se mezcla con el archivo original. Elije Menú Capas > Añadir másca- 
ra de capas. 

6. Enfoca en la imagen en por lo menos un 100% antes de corregir la máscara. 
Nota que el 'cono de la máscara es blanco en la ventana de Capas. Debido a que 
todo en la capa es revelado, la máscara completa es blanca. La máscara se encuen- 
tra activa en la ventana de capas. Puedes ver que parte de la capa se encuentra 
activa - el contenido o la máscara, porque va a haber un marco alrededor del icono 
para el componente activo. 

Consejo: Haz clic en el icono del contenido de la capa o de la 
máscara de la capa para activar cualquier componente de la capa. 

Ahora mezclaremos los bordes del bigote usando la herramienta del pincel en la 
máscara de la capa. Esto hará que el bigote parezca más realista en la cara del gato. 
Haz clic en la herramienta del pincel. Carga el negro en el color del primer plano. 
El negro será utilizado en la máscara para ocultar las partes del contenido de la 
capa. Utilice el deslizador de la opacidad en las opciones del pincel para reducir la 
opacidad hasta el 70%. Utiliza un pincel grande, suave. Fijamos nuestro pincel en 
30 pixeles y dureza del 0%. Traza apenas alrededor de los bordes del bigote con el 
borde de la herramienta del pincel mientras que pintas contra el borde del bigote. 
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7. Utiliza la opción Ajustar Imagen a la Ventana presionando Shift+Control+ y 
luego ve lal imagen con y sin la capa de máscara. Haz clic derecho en la capa de 
la máscara, ve al menú desplegable y selecciona Desactivar máscara de capa para 
desactivarla. Activa la caja para activarla de nuevo. 



¡J «chll-ourfinalfile.psd-18.0 (RGB, 2 capas) 720x957 - GIMP [TJQñJjT] 

Archivo Editar Seleccionar Ver Imagen Capa Colores Herramientas Filtros Ventanas Ayuda 
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2 capas) 720x957 - GIMP [T][a][x] 

Herramientas Filtros Ventanas Ayuda 




8. Ve la máscara en la ventana de documento clic clic mientras presionas la tecla 
Option, en el icono de la máscara. Es posible corregir la máscara con la pintura 
negra o blanca en este modo, aunque sin ver como la edición afecta la máscara en 
ambas capas no es recomendable que lo hagas Haz clic en el icono del contenido 
de la capa para volver al modo estándar de edición. 




9. Ahora para la prueba verdadera: ¡repite todos los pasos en ambos ejercicios con 
la otra mitad del bigote ! 
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10. De nuevo, repite estos pasos para los ojos. Utiliza la herramienta de la selec- 
ción elíptica para seleccionar uno de los ojos de Dali. Luego presione Shift mien- 
tras seleccionas el otro ojo con la misma herramienta. Haz la capa original activa 
haciendo clic en ella. Copia y pega en una nueva capa. 




1 1 . Utiliza la herramienta Mover para colocar los ojos sobre la cara del gato. 
Tendrás que seleccionar cada ojo individualmente para moverlo al lugar y rotarlo 
usando la herramienta de la rotación. Agrega una máscara de capa y utiliza la pin- 
tura negra para ocultar los bordes de los ojos. 
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[| *chll-ourfinalrile.psd-18.0 (RGB, 4 capas) 720x957 - GIMP [TJ^ñJQT] 

Archivo Editar Seleccionar Ver Imagen Capa Colores Herramientas Filtros Ventanas Ayuda 

«H ■ i ~> ■ i ■ & 




Ejercicio 3: Adición de una capa de la forma 

1 . Elije la herramienta de la selección rectangular. Haz clic en la caja al lado de 
esquinas redondeadas en el menú de opciones. 

2. Haz una nueva capa. Haz clic y arrastra el ratón para dibujar un rectángulo 
redondeado en la imagen cerca de los dedos de Dali. Después utiliza la herramienta 
de relleno con el sistema de color del primer plano en rojo y haz clic dentro de la 
selección. Esto rellana la selección en color rojo. 
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3. Utiliza la herramienta del texto para escribir "Dali y su gato" en la caja rectan- 
gular. Utilizamos News Gothic Italic en 62 puntos con un espaciamiento de la letra 
de 40 puntos. 





Dalí y su gato 
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El Internet surgió de un proyecto iniciado por el Departamento de Defensa de Esta- 
dos Unidos durante la guerra fría. La Advanced Research Projects Agency (ARPA, 
Agencia de Investigación de Proyectos Avanzados de Defensa en español) quiso 
crear una manera de comunicar y compartir la información entre computadoras que 
estuvieran conectadas. El objetivo de ARPANET era mantener la comunicación, 
incluso si una porción de la red se dañaba debido a un desastre o guerra nuclear. 
Como con muchas iniciativas, hay puntos de conflicto en la entrada de esta tec- 
nología. Por ejemplo, antes de que ARPANET estuviera en línea en 1969, inves- 
tigadores en Francia e Inglaterra desarrollaron por su parte, una conmutación de 
paquetes como componente escencial para asignar una ruta a datos en una red. 

Durante los años 80 el número de dispositivos de red que ofrecen servicios a otras 
computadoras conectados a una red (hosts), usuarios, y adelantos tecnológicos 
se amplió. Las computadoras de escritorio y los módems de marcado manual 
(dial-up) trajeron el Internet al hogar. En 1993, el presidente Bill Clinton creó la 
dirección de correo electrónico president@whitehouse.gov cuando la casa blanca 
de los E.E.U.U. creó una página web (www.whitehouse.gov). En ese mismo año, 
el National Center for Supercomputing Applications (NCSA, Centro Nacional de 
Aplicaciones de Supercomputació en español) lanzó Mosaic, el primer navegador 
web que mostró imágenes en línea. En 1994, podías comprar en línea u ordenar 
una pizza de la página web de Pizza Hut, en Estados Unidos. 

A pesar de su corta historia, el Internet ha visto altos y bajos en la tecno-utopía, 
crisis a causa de la tecnología conocida como la explosión punto com, y el resur- 
gimiento de la interactividad de páginas de contenido generado por usuarios como 
MySpace, Facebook, Linkedln, YouTube, y Flickr. 

La m¡ Máquina de Wayback es un archivo de páginas web que datan del principio 
de los 90. Utilizamos la máquina de Wayback para ver páginas web de los años 
90 y compararlos con los mismos sitios en el año 2008. Nota cómo la estética de 
los gráficos en la red, han cambiado en las últimas dos décadas. La nueva estética 
es posible gracias a la creciente velocidad de la red, los cambios en técnicas de 
programación, y a la evolución del diseño de información. Mayores velocidades de 
conexión dan lugar a la capacidad de cargar y de transferir archivos más grandes. 
Los gráficos son más grandes, más frecuentes, y más coloridos en páginas web 
actuales que los gráficos hechos para la red en los años 90. 

Nota: La máquina de Wayback contiene un archivo sobre de 85 mil millones de 
páginas web. Puedes usar el motor de búsqueda en: http://www.archive.org. 
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You can scarch thc White Housc web site for: 
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laitof dic Clinton Adminisuacic-n. 
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Welcome to Pizza Hut! 
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De arriba a abajo: Whitehouse.gov el 23 de octubre de 1997; Whitehouse.gov el 5 
de noviembre de 2008; Pizzahut.com el 14 de febrero de 1997; Pizzahut.com el 5 
de noviembre de 2008 . 



Ejercicio 1: De la entrada digital a listo para 
la Web 

1 . Busca cualquier imagen de tu cámara digitale o escánner, y ábrela en Gimp. 

2. Ajusta la gama tonal y el color a tu gusto creando capas del ajuste. 

Consejo: Normalmente, los monitores están configurados en 1280 por 800 o 1024 
por 768. Un archivo con un ancho de 1600px is lo suficientemente grande como 
para cubrir la ventana de un navegador de red o un monitor. La única medida re- 
levante a usar en este ejercicio, es el píxel, ya que las imágenes serán mostradas en 
una plataforma que también usa píxels. 
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3. Guarda ese archivo como copia principal eligiendo el Archivo > Guardar como, 
y escribe en el nombre del archivo archivo_master, luego selecciona el tipo de ar- 
chivo como un archivo XCF. Nosotros guardamos el nuestro como orbitz_master. 

xcf. 



4. La imagen del wiki es una imagen directa de una cámara digital de 7 mega- 
pixels, lo cual es un tamaño mucho más grande de lo normalmente mostrado en 
la red. Selecciona Imagen > Escalar la imagen y nota el tamaño de tu imagen en 
píxels. Nota el icono que muestra una especie de cadena. Esto indica que Gimp 
va a mantener la relación de aspecto (o proporciones) entre el alto y el ancho de tu 
imagen. Cambia las dimensiones en píxels en la caja marcada como Anchura, de 
manera que la dimensión más largo no sea más de 1600px. Si tu imagen es menor 
a 1600px de ancho, puedes usar el botón Cancelar para cerrar esta ventana sin 
hacer ningún tipo de cambio. 



■^ Escalar la imagen 

orb¡tzlad.jpg-2 



Tamaño de la imagen 

Anchura; 1600 

Altura: 1200 



1600 x 1200 pTxeles 
Resolución X: 72,000 Fl ~" 



E 



Resolución Y: [72,0001 \ Z\ , póteles/in |í 
Calidad 

Interpolación; Cúbica 



Q Ayuda 


^2.1 Re iniciar 


fjCancelar 


"^Escala 



5 . Agrega una máscara de desenfoque (Filtros > Realzar > Máscara de desenfo- 
que). Asegúrate de que la capa de la imagen esté seleccionada, y no el layer de 
ajuste. Nosotros usamos la siguiente configuración para la fotografía del anuncio 
de Orbitz: Cantidad: 0.25; Cantidad: 0.6px; Umbral: 0. Es posible que tu imagen 
necesite una configuración distinta. 



Filtros Ventanas Ayuda 


Capas H 




1 j Repstirel último 

ver a mostrar el último Mayús.+Ctrl+F 
r i¿\ Restablecer todos los filtros 

Desenfoque [Blur] > 


lodo: 1 Normal |v 








Dpacidad: ^^^^H~"~| 100,0 |* 
Bloquear: D ■ 




<S> : &vl Fondo 




i- Realzar [Enhance] > 


Antialias 
Desentrelazar.., 
Desparasitar.,. 
Enfocar [Sharpen],,. 
Filtro NL... 




Distorsiones > 
i Luces y sombras > 
, Ruido > 

Detectar bordes > 
f Genérico > 

Combinar > 
í Artísticos > 

Decorativos > 

Mapa > 
lj Penderizado > 

Web > 

Animación > 




Máscara de desenfoque.,. 




Quitar bandas.., W' 
Quitar ojos rojos.,. 








Alfa a logotipo > 




Python-Fu > 
Script-Fu > 


a 




•xrm 


i 
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El Vista previa 
Radio: 



Cantidad: f 
Umbral: 



0,6 


v 




0,25 


V 




«1 
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(Q Ayuda ^Cancelar <^J Acepta 



6. Selecciona Archivo > Guardar como. Como regla general, imágenes fotográfi- 
cas y otro tipo de imágenes con más de 256 colores son guardadas como archivos 
JPEG. Imágenes Gráficas - imágenes con pocos colores como logotipos y artes 
hechos con líneas - son guardados como archivos GIF o PNG. Debido a que esta 
imagen es una fotografía, seleccionamos JPG del menú desplegable de formatos. 
Asígnale un nombre a tu archivo que termine en ' .jpg' (nosotros usamos orbitz_ 
web.jpg). 

Nota: El ojo humano, no puede detectar la compresión de imágenes cuand es vista 
en una pantalla de computadora. Las compresiones de imágenes van desde a 
100. Cero se refiere a una muy baja calidad, donde definitivamente serás capaz de 
notar la pérdida de calidad en la imagen, mientras que el nivel máximo de 100, a 
pesar de peder información, no muestra cambios obvios de reducción de calidad. 
El resultado de una imagen con comprimida en gran cantidad es un archivo de 
menor tamaño. Analiza la necesidad del tamaño de un archivo comparado con la 
percepción de la calidad de un imagen, y decide que nivel de compresión usar. 

7. Pulsa la tecla Return luego de escribir el nombre del archivo con extensión .jpg, 
y verás la ventana Guardar como JPEG. Haz clic en Opciones Avanzadas para ver 
las opciones que pueden ser cambiadas que te permitirán mostrar la imagen en la 
red. 



8. Ajuste el deslizador de la calidad a 60. Salvar un archivo para la red comprime 
la imagen guardada en un tamaño de archivo más pequeño, al remover información 
de color y detalle de píxel. quitando la información del color y el detalle del pixel. 
Esto es conocido como compresión lossy (compresión con pérdida). 
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GUijfdiir cuíijíí JPEC 



G¡]1 



Calidad: 



"ÜlM 98 



Tamaño de archivo: desconocido 

□ Mostrar vista previa en la ventana de la imagen 

V Opciones avanzadas 

Optimizar 
□ Progresivo 
Guardar los datos EXIF 
Guardar miniatura 
El Guardar los datos XMP 

Usar los ajustes de calidad de la imagen original 
Comentario 



■ J 1 — 1 




0,00 A 








□ Usar marcadores de reinicio 


1 ; 








Submuestreo: 


1x1,1x1,1x1 [la mejor calidad) 


V 








Método DCT: 


Entero 


V 



Cargar predet. Guardar predet 



40 Ayuda 



Qcancelar ^Guardar 



9. Selecciona Archivo > Abrir, luego haz clic una sola vez en orbitzad.jpg. No 
abras el archivo, solo selecciónalo y nota que a la derecha del nombre del archi- 
vo, puedes ver el tamaño del archivo, mostrado como 4.4 MB. Ahora haz clic en 
ortiz_web.jpg. El tamaño del archivo optimizado es de 168 KB. La compresión 
de la imagen equivale a un 38% del tamaño de la imagen original. Esto es impor- 
tante, ya que mientras más pequeño el archivo más rápido cargara la imagen como 
parte de la página web. 

10. Reduce la calidad a 5. Nota cuanto detalle se pierde al hacer esto. Artefactos 
de compresión visibles son introducidos en la imagen. Nuestro archivo es mucho 
más pequeño en 44.3 KB, pero hemos comprimido mucho la calidad de la imagen 
por querer obtener un archivo pequeño. 

Consejo: La herramienta para acercarse (con forma de lupa) y Mover (una flecha 
de cuatro puntas) te permiten acercar la imagen y mover los detalles importantes. 

11 Vuelva a orbitz_master.xcf, Guardar como, y nombra tu archivo con un guión 
bajo (_) y la palabra "web" como lo hicimos cuando nombramos los nuestros 
orbitz_web.jpg. Fija la calidad a 98, y guarda la imagen. Recuerda los estándares 
de la red cuando para nombrar archivos: usa solamente caracteres alfa numéricos, 
guiones bajos, y rayas. 

Cuidado: Cuando abras un archivo y cambies sus dimensiones, no seguirá siendo 
el archivo maestro. Esto puede parecer confuso, pero es una situación que expe- 
rimentarás con frecuencia cuando mantengas archivos maestros y archivos con 
dimensiones diferentes para la red. No existe nada que no permita que uses la 
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opción de Guardar como para guardar archivos maestros de dimensiones menores, 
pero es probable que te confundas y luego pienses que no tienes una versión de 
dimensión mayor. 

12. Abra el JPEG que usted acaba de ahorrar para la tela (los nuestros son or- 
bitz_web.jpg) en Gimp, y note que no hay capas del ajuste, guardando para la tela, 
la imagen se aplana automáticamente. Las capas se derrumban sobre una capa del 
fondo. 



Ejercicio 2: GIF vs JPEG 



Según lo indicado en el ejercicio 1 , las imágenes fotográficas con muchos colo- 
res se guardan como archivos JPEG, y las imágenes gráficas con pocos colores 
se guardan como archivos GIF. Seguir estas reglas producirá mejores imágenes y 
tamaños del archivo más pequeños. 
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Las dos imágenes superiores demuestran el archivo maestro a la izquierda y un 
archivo JPEG a la derecha. Las dos imágenes inferiores son el archivo maestro a 
la izquierda y un archivo GIF a la derecha. Es necesario destacar, que todas estas 
imágenes fueron guardadas como archivos PNG para poder ser mostradas en esta 
página web, de manera que la demostración no funciona tan bien en esta platafor- 
ma como lo haría en impresos. Sin embargo, nota como en las imágenes guarda- 
das como archivos JPEG (superior derecho) tiene un valor mayor de calidad visual 
que el mismo archivo guardado en GIF (imagen inferior derecha). El archivo GIF 
también es de mayor tamaño que el archivo JPEG. 



Ejercicio 3: Subir archivos a Flickr 

Cargaremos esta foto a Flickr, y luego la publicaremos en un blog de WordPress en 
el ejercicio siguiente. Nuestro ejemplo era una publicación en el blog mantenido 
por la Anti Advertising Agency (Agencia Anti-Propaganda) (http://antiadvertisin- 
gagency.com/). En sus palabras, "la Anti Advertising Agency coopta las herramien- 
tas y estructuras usadas por la publicidad y la industria de relaciones públicas. . . . 
A través de la parodia constructiva y humor sutil nuestras campañas pedirán a 
los transeúntes considerar críticamente el papel y la estrategia de la mercadeo de 
medios de la actualidad así como las alternativas en el área públca." (http://antiad- 
vertisingagency.com/our-mission). 

Nuestra publicación es crítica de este anuncio de Orbitz para su carencia de ima- 
ginación. La publicidad es uno de los lugares donde la sociedad imagina el futu- 
ro, adopta la tecnología, y construye realidad de la fantasía. En este anuncio, los 
modelos tienen mucha tecnología y comunidad al alcance de sus manos, y Orbitz 
aboga que el viajero llama a alguien para buscarlo en el aeropuerto, en lugar de 
dirigir al viajero a una página web que pueda aconsejralo en cómo localizar su des- 
tino final por medio del uso de transporte público, pero esto solo ocurre cuando los 
anuncios imaginan un nuevo y mejor futuro. Sin embargo, no estamos criticando 
el diseño gráfico. 

1 . Inicia sesión en tu cuenta en Flickr.com. Si no tienes una cuenta, necesitarás 
crear una. Flickr es parte de Yahoo! , de manera puedes usar un nombre de usuario 
que tengas en Yahoo! para Flickr o crea uno nuevo. Servicios en línea como Face- 
book, Picasa, y otros, también tienen programas integrados que puden ayudarte a 
subir archivos de manera gratuita. 
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Iniciar sesión 



Crea tu cuenta 



Sob 1e llevara un momenlo con 1u ID de Yahoo! 



VÍDEO 



Comparte fotos. 
Conoce el mundo. 



BUSCAR 



2. En la interfaz de Flickr, haz clic en Tú > Cargar fotos y videos. 



flickr 



Inicio 




Tuc 



T Carga 




Tú jsj Organizar 

Tu galería 


Contactos 






Tus colecciones 






Tus álbumes 




oazo! 


Tus archivos 






Tus etiquetas 






Tu mapa 
Tus favoritas 










Tus estadísticas 






Actividad reciente 
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Cargar fotos y videos 


uj! 


Tu cuenta 




hJM k 


Tu perfil 






Flickrcorreo 







Tus 



3. Haz clic en Elegir Fotos y Videos. En la nueva ventana que se abre, busca tu 
archivo JPEG en la computadora. Una vez hecho esto, haz clic en seleccionar. 
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Elegir fotos v videos 



Nota: Los videos son limitados 



£s de duración, y 500MB de tamaño. Agrender m-x-.. 



Cargar a Flickr 

Archivo 
orbitz_anuncio.jpg 



4. Haz clic en cargar fotos y videos. 

Visible para tus familiares 
'•.••' Public as (c ualqu ¡q ra puodQ ve rías ) 

Cargar fotos y videos 



O bien, cancela y ve a Tu secuencia de fotos. 



5. Haz clic en Agregar descripción. 



® 



¡Terminaste! Siguiente: ¿deseas 



gregar una descripción 



I, quizás? 



Herramientas de ca 



rgn 



6. Si quieres puedes cambiar el título de tu archivo. En este caso, nosotros lo cam- 
biamos a Falta de Imaginación . 
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Títulos, descripciones, etiquetas 




Titulo: 



Falta de Imaginación 



Descripción: 



Un anuncio de Orbitz poco imaginativo 
sobre lafaltade imaginación en el uso de 
tecnología" 



Biquslas: 



móvil, traje, equipaje, viaje, trafico, JFK 



7. Dale una descripción al archivo. Cuando publicamos nuestro archivo nuestro 
descripción fue "Un anuncio de Orbitz poco imaginativo sobre la falta de imagina- 
ción en el uso de tecnología". 

8. Asignale etiquetas a tu archivo. Las etiquetas permiten que las personas pue- 
dan conseguir tu archivo al hacer búsqueda de una imagen. Para esta imagen, las 
etiquetas son "Anuncio, Orbitz, Teléfono Móvil, Traje, Equipaje, Viaje, Tráfico, 
JFK". 

9. Guarda la imagen. La imagen será mostrada ahora en tu galería. 
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X 1 1 f\j u Sesión iniciada como Jenny_Dopa£o 

Inicio Tú Organizar Contactos Grupos Explorar ▼ 



TU CJélISricl JUSl 937efementos/707vstas 

Colecciones Álbumes Etiquetas Archives Favoritas Popular Perfil 



Falta de Imaginación 




Un anuncio de Orbitz poco imciqinntivo 
sobre la falta el* i malina-:: ion en el uso de 

tecnología" 

© B Cualquier persona puede ver esta foto 

(editar) 

Cargada el 23 da abr, 2309 | Eliminar 

1 vbíh . □ comentares 




raz cite aquí para agregar una descripción 

© O Cuaiqíjer persona puede vgr esta foto 

(editar) 

Cargada el S de abr, 2009 | Eliminar 

comentares 



10. Haz clic en la imagen para navegar a la página que le corresponde. 

1 1 Presiona en el botón con forma de lupa que se encuentra en la parte superior de 
la imagen. Este botón corresponde a la acción "Todos los tamaños". 

Falta de Imaginación 




Un anuncio de Orbitz poco imaginativo sobre la falta de imaginación en el uso de 
tecnología" 

Agrega tu comentario 



- Gí 



I 



Etique 

-. me 
■ Ira 
ec| 
vi a 
Ira 
JFI 

Agrega 

Inform 

©Tock 


O Añai 
O Ton 



182 



Gráficos en la Web 



12. Selecciona la imagen de tamaño mediano que tiene un ancho de 500 pixeles. 



Miniatura 
(100x 75) 



Pequeño 
(240 x 180) 



tí 



Grande 

(1024x768) i 




13. Copia el código que se encuentra en la parte inferior de la página que te per- 
mite enlazar tu imagen. Selecciona todo el texto que ves en la caja y luego con 
el botón derecho del ratón haz clic y selecciona del menú desplegable la opción 
"copiar". Una vez hecho esto, puedes insertar la imagen en tu blog copiando este 
código en el área de escritura del post. Nosotros agregamos nuestra imagen a la 
paginaAntiAdvertisingAgency.com. 



Para crear un enlace a esta foto en otros sitios Web, puedes: 

1. Copiar y pegar esta HTML en tu página Web: 



<a href ="http : //www. f lickr. com/phutos/jennif erdopazo/3486¿ 
titltí="Falta de Imaginación por Jfínny Dopazo, en Flickr">* 


25907/" 
img 




src="http : //f arm4. static , f lickr. com/3412/34 
width="50Q" height="375" alt="Falta de Imag 


Deshacer 




¿* Cortar 






2. Seleccionar ladireccion URL de lafoto: 


L?] Copiar 


fr 




http://farm4.static.flickr.com/3412/3486425907 


* Pegar 
Q Eliminar 




Recuerda. Las Normas de lacomunidad de Flickrespec 
Flickren un sitio Web externo, la foto debe estar vinculan 


ato de 
s. (Por lo 


[]|| Seleccionar todo 


tanto, usa laopción 1). 

Volver a la página de fotos de Flickr 


Revisar ortografía 
idiomas > 





Ejercicio 4: Creando un mensaje en un blog 

A pesar de que crear y mantener un blog se encuentre por fuera de área de este 
libro, muchas personas tienen blogs en la actualidad, quienes asumiremos tienen 
un blog o han usado un blog. Si esto no es cierto, deberías enfocarte en aprender 
como cargar una imagen de una página web a otra con un simple código pre escri- 
to. Esto es relevante para los capítulos 15 - 17. 

Consejo: Si no tienes un blog puedes crear uno de manera gratuita en WordPress. 
com. A nosotros nos gusta particularmente WordPress porque existe una gran 
comunidad de usuarios, tienen muy buena documentación, diversidad de temas 
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visuales, plug-ins, y es de código abierto (lo cual significa que el código fuente 
está disponible para manipularlo y expandirlo). Tumblr, Blogger, Moveable Type 
y Typepad son otras plataformas de blog que son muy buenas de usar como otra 
opción. 

1 . Cada interfaz relacionada con los blogs es ligeramente distinta, pero todas com- 
parten processos similares. El primero de ellos será Entrar (log in). 




WordPress 



Username 



jndopazo 



Password 



Log In 



^ Remember Me 



Lost your password? 



2. Haz clic en el botón "Write a New Post" (escribir un nuevo post). 

3. Dale a tu publicación un título. Nosotros llamamos al nuestro "Anuncio Orbitz: 
Notable Falta de Imaginación". 

4. Pegua el código de la imagen que copiamos anteriormente desde Flickr. 
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Write Post 

Title 



Anuncio de Orbitz: clara falta de imaginación 



Post Add media: H H Jí # visual HTML 

b i \ Nnk b-quote dst ins I img ul I ol li I code more 



lookup cióse tags 



/3412/34S 64259 □7J142f332de.jpg" width="500" height="375" alt="Faltade 
Imaginación" /></a> 

"Michas! Kraus v|o el aviso de la langa cola para los taxis. De manera que llamo a 
su hermano que vive cerca y obtuvo una carrera hasta su casa. Ahora él le debe 
un emparedado de pavo. " 

Propaganda es el imaginar futuros con potencial. Es sobre esperanza, aspiraciones 
y sueños. ¿Acaso conseguir una carrera a casa 



- 



5. Escribe el contenido de tu post. 

6. Agrega las etiquetas, en este caso llamadas tags (el equivalente en inglés para 
etiquetas). Las etiquetas ayudaran a categorizar y organizar el contenido del sitio. 
Generalmente quiersn usar etiquetas que has utilizado anteriormente. De manera 
que si inicialmente usaste la etiqueta "diseño", problablemente quieras usar esa 
etiqueta en lugar de "diseñado". Cuando pubicamos nuestra imagen en el blog de 
Anti Advertising Agenc, etiquetamos nuestro post con las etiquetas existentes "bill- 
board, branding, justfollowingorders, not creative, self-loathing, you don't need it", 
porque estamos haciendo un comentario sobre un punto de vista crítico. Cuando 
las etiquetas son aplicadas, trata de ponerte en el lugar de una persona buscando 
contenido en el Internet. Pregúntate a ti mismo, que palabras usarías para buscar el 
contenido que estas creando. 
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i 



Tags 



agen corporativa, s ol os egui ronden es 



Add 



a 



Sepárate tags with tommes 

Tags used on this post: 

cartelera imagen corporativa soloseguirordenes 



Categories 

+ Add New Category 
All Categories noticias 








Publish Status 

Unpublished _^| 

I—I Keep this post prívate 
7] Publish imrmediately Edit 



Delete post 



Last edited byjenny on April 29, 
2009 at 3:38 pm 
Word count: 54 



7. Selecciona una categoría, en este caso las "news" (noticias). 

8. Agrega tu post. Si estás escribiendo en tu propio blog, normalmente harás clic 
en el botón Publish (publicar). 



9. Haz clic en el enlace "View Post Link" para ver tu post. Michael Mandiberg 
creó un post en inglés en la siguiente página: http://antiadvertisingagency.com/ 
news/orbitz-ad-distinct-lack-of-imagination 
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Gráficos en la Web 



▲ 



ANTIADVERTISINGAGENCY 



Orbitz Ad: Distincf Lack of Imagination 




Sea re 



Corita 

Cont 
Join 

RSSF 



Rece i 

No o 

Bufe 

Pos* 

The 1 

hW 
Pos* 

You 

Preci 
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Múltiplos: Creando Una Unidad 

La retícula es la manera principal de organizar elementos de la página en docu- 
mentos de páginas múltiples. Una retícula divide una página en columnas para ser 
seguida estrictamente, o para utilizar como una guía flexible. El ejemplo visual 
de la Biblia de Gutenberg sigue una estructura muy rígida de la retícula: las dos 
columnas del texto tienen la misma longitud en cada una de sus líneas, que es una 
medida de cuánto tiempo es una línea de texto antes de que se rompa a una nue- 
va línea. Las dos columnas de texto también tienen la misma longitud vertical. 
Cuando dos páginas son vistas juntan en un libro abierto tal como este, las páginas 
pueden ser leídas como un desplegable. Las páginas en esta extensión siguen la 
retícula exactamente de la misma manera. 

La retícula puede también adaptarse a las disposiciones más flexibles. Elejemplo 
de referencia de la disposición de New York Times a partir de 1918, muestra una 
retícula es más compleja y versátil. Esta retícula divide la página en ocho colum- 
nas. 

La cuenta de las columnas en la página es fácil: encuentra la columna más pe- 
queña y mide su anchura. Luego divide la anchura de la página con la anchura de 
la columna más pequeña. Con ocho columnas, el diseñador tiene más opciones. 
En lugar de ocho columnas iguales de texto que fluyen en la página delantera del 
periódico, algunos elementos gráficos como el titular en la parte superior de la 
página puede hacerse del ancho de las ocho columnas. A otros bloques de texto se 
les puede dar énfasis visual o crear jerarquías en la página extender el contenido en 
varias columnas. También es importante estudiar el espacio negativo que se crea 
en la página. Ya que hay mucho texto en la página frontal, el contrate es creado al 
aumentar el espacio entre las líneas en algunas áreas de la página y dejando que 
algunos bloques de textos se extiendan más allá de una columna. 
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Una copia de la biblia de Gutenberg de Johannes Gutenberg, propiedad de la Bi- 
blioteca del Congreso de los E.E.U.U. 180 copias de la biblia fueron impresas en 
Mainz, Alemania en el siglo XV. 



[ *~xr \ fffrje ?fa frek $imz^ £p¡g 



ARMISTICESIGNED, END OFTHE WARt 
BERLÍN SEIZED BY REVOLUTIONISTS; 
NEW CHANCELLOR BEGS FOR ORDER; 
OUSTED KAISER ELEES TO HOLLAND 



-W.W0 

■ ■ — ni., ^n 



,W ... J.-'.li 



■!: M :.y¿ I 
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La página delantera del NY Times, 1918. 
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Resultados de los ejercicios del capítulo 13 

Cuando termines todos los ejercicios del capítulo 13, guardarás el documento 
como un archivo pdf . Las dos páginas en el documento se ilustran aquí. 



Unidad en la Retícula 



icllicrtudin quam erat quis lígula. Aerean massa nulla. 

íolutpat en, acíumsan et. Iringilla egct. odio. Hulla 
jila vitas turpis. í'raasarit 
Le penatibus et magnis dis 
:atur ridi:ulu; mus. Maecenas 

Lllam malesu 



;: j;.Ljm 



■■ 









i. D ute agestas, ipsum sit amet molestia tinoid 
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páginas principales 



Lorem ipsum dolor slt amat, canse-: tatuar ad'pls: "15 elit. 
















libero net m i laoreet volutpat. Aliquam eros sede 












































Curabiturturpisest, bibendum tristique, p. ilim i u mor, 








Vivamus aligue! tempus velit Curabrtur ¡nterdum pcsuere 




rlsus. Uuis agestas, ípsum sit amet molestie tincidunt. 








sapien. Uteuvellt a t massa auctor mattis. Namtrstkjue 








Vivamus naque velrt ornare vitae. tempor vel. Lltrices et, 
















Lorem ipsum dolor sit amet, :orsa:tatuar adipis: ¡ng el re . 







1 . Al abrir Scribus se abrirá la ventana de Nuevo Documento. Nota que a dife- 
rencia de otras ventanas de Nuevo Documento que has visto, Scribus the permite 
especificar el número de páginas. Configura tu documento con las siguientes 
características: Selecciona Página Simple en el área Disposición del Documen- 
to, especifica el tamaño de la página a Letter (carta), del menú desplegable en la 
sección de Tamaño de Página, deja los margenes con la configuración original, 
selecciona 2 en Número de Páginas en la sección de Opciones y luego presiona el 
botón Aceptar. 



íJuajü dutuiijajiiu 






Nuevo documento Abrir documento existente Abrir documento reciente 
-Disposición del documento-i r- Tamaño de página — 



IJA H.m.lM U 



Página doble 



Página triple 

[tríptico) 



La primera página es: 



~3 



Tamaño: 
Orientación: 



~H 



Anchura: |612.Q0 pt i¡ Altura: 1 792.00 pt §[ 



-Guías -de margen 

Disposiciones predefinidas: 

Izquierda: 140.00 pt 

Derecha: 

Superior: 

Inferior: 



|40.00 pt 



;~j 

:40.00 pt ^J 

J40.00 pt ^j 

Márgenes de impresora... I 



Número de páginas: [ ... -fj 

Unidad por defecto: I Puntos (pt) _▼] 



V Marcos de texto automáticos 



V No mostrar más este diálogo 



Aceptar I Cancí 
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2. Una vez que el nuevo documento se abra, observa si la ventana de Ordenar Pági- 
nas está abierta. Si no está abierta, ve a Ventanas > Ordenar Páginas. En la ventana 
Ordenar Páginas hay una sección etiquetada como Páginas del Documento. En 
esta sección, cada icono representa una página en el documento. Haz doble clic en 
el icono de la página 2 para ir a esa página y luego haz clic en el icono de la página 
1 para volver a la primera página. Otra manera de navegar a través de las páginas 
en un documento, es haciendo clic en las flechas que se encuentran en la parte in- 
ferior del documento que equivalen a página siguiente y página anterior. También 
puedes usar la herramienta de la mano para arrastrar las páginas alrededor de la 
ventana del documento. Cuando nada está seleccionado, presiona la barra espada- 
dora para cambiar entre la herramienta de selección y la herramienta de la mano. 

Antes de empezar a editar el contenido en nuestras páginas, debemos crear una Pá- 
gina Maestra. Las páginas maestras, comúnmente tienen una retícula y elementos 
de diseño que serán usados en las páginas. Estas páginas permiten crear un diseño 
consistente a través de las páginas en una publicación y hacen posible la automati- 
zación de los cambios en el diseño, debido a que cualquier modificación hecha en 
la página maestra, será reflejada automáticamente en todas las páginas a las cuales 
la página maestra fue aplicada. Puedes crear múltiples páginas maestras, que pue- 
den ser aplicadas luego a diferentes páginas dentro del documento. 

3. Para crear tu primera Página Maestra, selecciona la ventana de Ordenar Pági- 
nas y haz doble clic en la palabra Normal en el área Páginas maestras disponibles. 
Esto abrirá la ventana Editar Páginas Maestras. Puede ser que no te hayas dado 
cuenta, pero las páginas de tu documento han desaparecido, la página blanca que 
ahora aparece en tu ventana no es otra sino la página maestra en blanco de la 
página maestra Normal. Esta es la página maestra que será aplicada a cada página 
nueva por omisión. Siempre que tengas la ventana de Editar Páginas Maestras 
abierta, estarás editando tu página maestra. Para volver al documento, cierra la 
ventana Editar Páginas Maestras - pero no lo hagas aún. 

Haz clic en el primer icono en la ventana Editar Páginas Maestras (se ve como 
un documento nuevo) para agregar una nueva página maestra. Nombra la nueva 
página maestra Maestra A en la pequeña ventana que se abre. Cualquier cosa que 
hagas en esta página que ahora aparece en la ventana principal será guardado en 
Maestra A y aparecerá automáticamente en todas las páginas a las cuales le apli- 
ques esta maestra. Cambios en las páginas maestras serán actualizados automáti- 
camente en las páginas donde fueron aplicadas. 
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lnú±iiur púrjiiliiü 



Páginas maestras disponibles: 



Páginas del documento: 



-DÍ5po5¡ció 
La primera págii 



3 



~J 



i 



y Editar páginas maestras | X | 

_l I .* I ■ I 



4. Fijaremos guías en la página maestra de manera similar a los ejercicios de 
Inkscape en el capítulo cuatro. Las guías son creadas al hacer clic en las reglas 
horizontales y verticales y arrastrándolas hacia la página. Las reglas son los bordes 
enumerados que se encuentran en la parte superior y a la izquierda de la ventana 
principal. Si las reglas no se están mostrando en pulgadas, puedes cambiar la uni- 
dad de medidas haciendo clic en el menú desplegable en la parte izquierda inferior 
de la página maestra. 



7nr 



"H K 1:1 W w - r 



_| ► M I Fondo t\ 



Comando imprtante: Muestra u oculta las reglas del menú Vista o presiona 
Control+Shift+R. 

5 . Haz clic dentro de la regla y arrastra el ratón hacia adentro del documento para 
crear guías. Comenzando con la regla horizontal en la parte superior de la ventana 
de documento, haz clic en la regla y arrastra una guía a 3 pulgadas, usando la regla 
vertical a la izquierda de la ventana principal como referencia. Luego arrastra una 
guía de la regla vertical a 5 pulgadas, usando la regla horizontal como referencia. 
Si necesitas cambiar de posición una guía, simplemente haz clic en ella y arrástrala 
hasta el lugar deseado. 

Observa 

Si necesitas poner guías de manera exacto, usted puedes hacerlo al seleccionar 

Página > Organizar guías. 
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|0 |1 12 II |4 |5 16 17 I 

—1 I 1 I I J I l I I J I l I I J I 1 I I J I 1 I I I I l I I J I L 



6. Utiliza herramienta Insertar Línea para dibujar una línea en la guía horizontal. 
Haz clic en el icono de la herramienta insertar Línea en la barra de herramientas 
(en la parte superior de la ventana principal) para seleccionarla. Comenzando en el 
borde derecho de la página, haz clic y arrastra hacia el borde izquierdo de la página 
para dibujar una línea recta a lo largo de la guía horizontal. Mientras arrastras el 
ratón, si presionas la tecla Control hará que la línea se mantenga de manera hori- 
zontal y el resultado será mucho más preciso. 

Nota que no dibujamos la línea hasta el borde, de manera que el espacio negativo 
permanece acitivo como en el capítulo Tipografía en la Retícula. Asegúrate de 
no mover parte de la línea fuera del documento, ya que no aparecerá cuando 
asignes la página maestra a las páginas del documento. Si continúas con el 
ejercicio y notas que tu línea desaparece, trata de volver a la página maestra mueve 
la línea de vuelta a la página. 

Consejo: Para colocar una línea exactamente en el borde de una página o de una 
guía, puedes usar Ventanas > Alinear y Distribuir. 





2 - fDnEiJ/íiüiiiii 
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Insertar Página Vista Extras Script Ventanas 
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I 2 , , , I 3 , , , I 4 , , , 


5 , , , I 6 , , , I 7 , , , 


I 8 , , 
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7. Ahora que se nuestra línea está dibujada, podemos ocultar nuestras guías. Para 
ocultar las guías, guías selectas de la Vista > Mostrar Guías, de esta manera, la 
opción de ver las guías quedará desactivada. 

8. Abre la ventana de las Propiedades seleccionando Ventanas > Propiedades. Utili- 
za la herramienta de la selección para seleccionar la línea si no está ya selecciona- 
da. Selecciona el panel de Línea en la ventana de Propiedades y establece el ancho 
de la línea a 20 puntos (pts). 



• 


Propiedades 




l*: 








X, Y, Z 








































Linea 










Punto de base: 


Punto izquierdo _r| 






Tipo de línea: 


H 


1 




É 


1 








Flecha inicial: 


Flecha final: 






Ninguno 


_t| 1 Ninguno 


É 




Ancho de línea: 


|20.0 pt 


Escjuinas: 

Terminaciones: 


| / '5\ s Unión de ir 


glete 


É 

É 


| [jTPIano 














Hfflffl 












Colores 



















9. Selecciona el panel de colores en la ventana de las Propiedades. Utiliza la herra- 
mienta de la selección para seleccionar la línea si no está ya seleccionada. Haz clic 
en el icono Editar Propiedades del Color de Línea para activarlo y luego haz clic 
en el color rojo (red) de la lista. Luego de seleccionar cualquier color, presionar 
cualquier tecla te llevará al primer color, cuyo nombre comience por esa letra. Esta 
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es una manera rápida de ir a un color rojo presionando la letra "r" en el teclado. 

Si al escoger un color la línea no cambia, es probable que estés cambiando el re- 
lleno the la línea y no la línea en si (o lo que nosotros conocemos como el borde). 
Debido a que la línea no está creando una forma cerrada, el color de relleno no 
producirá color alguno. Consulta la imagen de abajo para que veas que hay dos 
iconos sobre la lista de colroes. Asegúrate de haber activado el icono de la izquier- 
da (color de línea) antes de seleccionar un color. 



Wijyliiliidüi 



ts 



X. Y. Z 


Linea 


Colores 


(^ | Saturación: 


100% g 
1 -j 


b 


1 Editar propiedades del color d 
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□ □ Purplel 
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10. Enciende las guías otra vez usando guías de la Vistas > Mostrar Guías. 

11 . Ahora aplicaremos la página maestra que hemos creado a las páginas blancas 
de nuestro documento. Cierra la ventana Editar Páginas Maestras haciendo clic en 
el icono X en la parte superior derecha de la ventana. La ventana principal muestra 
las páginas del documento. Selecciona Página > Aplicar Página Maestra. En la 
ventana de Aplicar Página Maestra selecciona Mestra A del menú desplegable en 
Página Maestra y responde a "Aplcar A" presionando en el botón redondo al lado 
de Todas las páginas. Presiona el botón Aceptar. 
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12. Haz doble clic en el icono de la página 1 en la ventana de Ordenar Páginas para 
ver la primera página del documento. Nota que las guías y la línea gruesa roja 
deberían estar ubiadas en la página 1 . Haz doble clic en el icono de la página 2 y 
nota que las guías y la línea se encuentras ubicadas también en la segunda página 
del documento. Los objetos en la página maestra se mostrarán automáticamente 
en cualquier página que esté basada en esa página maestra. Es importante entender 
que los objetos en la página maestra, sólo pueden ser modificados o borrados de la 
página maestra a la cual pertenecen. Trata de seleccionar la línea roja o mover las 
guías en las páginas 1 y 2 y verás que no pueden ser editadas. 
Si no ves las guías y la línea roja en las páginas 1 y 2, es momento de revisar los 
errores. ¿Cerraste la ventana Editar Páginas Maestras? ¿Dibujaste la línea fuera 
del borde de la página? ¿Aplicaste la página maestra de manera correcta? 



Ejercicio 2: Creando una Página Maestra B 

El documento que estamos creando tiene solamente dos páginas, de manera que 
una página maestra es más que suficiente. Sin embargo, en documentos más gran- 
des que tengan distintas variaciones en su disposición y diseño, es a menudo será 
necesario utilizar múltiples páginas maestras. Haremos una segunda página mestra 
en este documento para demostrar el proceso. 

1 . Haz doble clic en cualquier página maestra en la ventana Ordenar Páginas. 
Deberás ser cuidadoso - si la ventana de Editar Páginas Maestras no abre, puede 
ser debido a una interferncia de menor importancia. Para trabajar a pesar de esto, 
nsimplemente de-selecciona la ventana de las Ordenar Páginas, y luego re-elijela e 
intenta su hacer doble clic otra vez. La ventana de Editar Páginas Maestras se abre, 
selecciona la página mestra Maestra A y haz clic una vez en Duplicar la Página 
Maestra Seleccionada (es el segundo botón, representado por dos hojas) en la parte 
superior de la ventana Editar Páginas Maestras. 

2. En la nueva ventana, cambia el nombre para llamarla Maestra B. 
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3. En este documento, Master B será similar a la página maestra Master A, pero 
modificaremos el color de la línea de modo que sea cyan en vez de roja. Selecciona 
la línea roja en la página Master B y después selecciona cyan del panel de colores 
de la ventana de las Propiedades. Deberás ser cuidadoso, el panel de colores con- 
trola tanto la LINEA como el RELLENO de los objetos en la página. Para poder 
editar el color the una línea debemos hacer click en el icono Editar Propiedades del 
Color de la LINEA antes de escoger un color. Es el icono de la izquierda con un 
pequeño dibujo de un lápiz dibujando una línea. Mira la imagen a continuación: 
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4. Cierra la ventana de Editar Páginas Maestras haciendo clic en el icono de X en 
el área de la superior derecha de la ventana. Esto debe mostrar de nuevo las pági- 
nas del documento. Elije la Página > Aplicar Páginas Maestras. En la ventana Apli- 
car Página Maestra seleccoina Mestra B del menú desplegable en Página Maestra y 
selecciona la opción todas las páginas. Ahora, activa la caja de Dentro del Rango y 
escribe de 2 a 2. Esto aplicará la página Maestra B solo a la página 2, pero puede 
ser usado para aplicar la página maestra a cualquier número adicional de páginas. 

5 . Haz doble clic en el icono de la página 2 en la ventana de Ordenar Páginas para 
ver la segunda página. Hay un campo en la parte inferior de la ventana principal 
que indica qué página estás viendo actualmente. Indica 1 de 2 si estás en la página 
1 , y 2 de 2 si estás en la página 2. En Este momento la página 2 debe ahora tener 
una línea de color cyan, mientras que la página 1 tiene una línea de color rojo. 

Ahora crearemos un título tipográfico que será copiado a la página 1 . En teoría, 
Esto es algo que se haría normalmente en la página Maestra A, pero queremos 
demostrar la naturaleza de la función de pegar de Scribus. 



Haz clic y arrastra el ratón con la herramienta Insertar Marco de Texto seleccio- 
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nada para dibujar una caja de texto parecida a la usada en Inkscape. Asegúrate 
de hacerla large; si es más pequeña que el texto que insertes, la caja aparecerá en 
blanco. Siempre podrás cambiar el tamaño del área de texto posteriormente. Una 
vez hechoa la caja, haz doble clic dentro de ella para obtenere un cursor de texto y 
escribe las palabras "Unidad en la Retícula". 

Ahora dale establece el formato del título sleccionando todo el texto y luego es- 
pecificando una fuente tipográfica y un tamaño. En el ejemplo siguiente, nosotros 
usamos Bitstream Vera Sans en 40 puntos. Pon atención al kerning (término tipo- 
gráfico en inglés para el espacio entre los caracteres), asegúrate de que los espacios 
entre los caracteres en el título sean visualmente equivalentes. ¿Cómo aplicas estas 
características? Todas estas opciones (tamaño de texto, peso tipográfico y kerning) 
son controlados en el panel del Texto en la ventana de propiedades. 
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7. Ahora copiaremos este título en la página 1 . Con la caja de texto aún seleccio- 
nada, selecciona Editar > Copiar. Haz doble clic en el icono de la página 1 de la 
ventana Ordenar Páginas para ir a la página 1 , y selecciona Editar > Pegar. El 
título aparece en la misma posición en esta página que estaba en la página 2. El 
comando de copiar de Scribus copia tanto el texto como su ubicación en la página. 
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Ejercicio 3: Enlazando cajas de texto 

Scribus es usado con frecuencia para crear documentos de múltiples páginas para 
impresiones comerciales o para crear archivos PDF. En cualquier caso, documen- 
tos largos pueden tener una cantidad considerable de texto. Scribus te permite 
situar cuanto texto cquieras en una sola caja de texto y luego usar la función de 
enlazar para enlazar múltiples cajas de texto juntas de manera que el texto pueda 
fluir de una caja a la otra. En Este ejercicio, enlazaremos dos cajas de thexto en las 
páginas uno y dos con alrededor de cinco párrafos de texto Loren Ipsum. Scribus 
tiene texto Loren Ipsum guardado en la aplicación de manera que puedes fácilmen- 
te llenar una caja de texto con texto simulado sin ser pegado de otro lugar. 

1 . En la página 1 , utiliza la herramienta Insertar Marco de Texto para hacer clic y 
arrastrar el ratón y crear una caja de texto en el área de trabajo. Necesitamos hacer 
esta caja grande, de manera que podamos cargar más texto simulado de necesitado 
en la caja de texto para ilustrar la característica de elance. 

2. Selecciona Insertar > Texto de Ejemplo. Selecciona Standard Loren Ipsum the 
la parte inferior the la lista que se abre en la nueva ventana. Esto cargará la caja de 
texto con texto simulado. 
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3. Utilice la herramienta de la selección para mover y modifica el tamaño de la 
caja de texto de manera que el borde izquierdo esté alineado con la guía vertical. 
Mueve el borde superior de la caja de manera que empiece a unas 6 pulgadas. Los 
bordes derecho y superior del la caja de texto deberán estar alineados con los már- 
genes derechos e inferiores de la página. 



200 



Múltiplos: Creando Una Unidad 



fjfreiN ípsttm dolor TrJ Bffiff, 
iftMvmfrf.Hiv' adipiscittg eiit. Vi a 
\¡apien. Atíquaiti aliqual purux ¡noíestie 
ilok Iftteger quis eras ut erat posuere 
süifum. Criraf'ifnr ifi%itix±inr. Ifileger 
'prci. Fitsei> vsilpiitíite lactts ai ipmtn, 
Quisque itt tihtro nec mi iaoreíf 
fyohtipal. Aliquatn eras pede, 
^ceitrisque quis, tristique cwrsws, 
vSuttrür cmtvüiliiy valit. Nam 
'fiwrfiíHfiituiTí, ¡\'uífa ut nmurisr 
Vburabitur adipiscin& mauria non 
Tftieíiim ¿tliqnnur, aren rixus dapihus 
\diant, ftec sotíieitiiditt qmtm erar quis 
figufa. Aettttott títü&fUt ituíkh Mititpat 
'fu, eciuwmn et r f/ingilla egtf, ítdio, 
tNutfa placerat futría justo. Ñutía i-itae 
JfufjMJÑ Praesetii iticus.Vestihuluiu ante 
Üpsitm primis tu faudotts arrí luctus tt 
jtUrictts pomere tnbilia Carne; 
'Áiiquíiiii itltricies lecua eu duL Dais 
viverra risus el eros. Antean odia 



\ 



I 

4. En la parte inferior the la caja de texto cuyo tamaño fue modificado, aparece 
ahora una pequeña X gris en un caja. Este icono significa que hay más texto 
guardado (pero no visible) en la caja de texto. Siempre es bueno darse cuenta de la 
aparación de Este icono durante la producción del documento, ya que no quisieras 
que parte del texto quede accidentalmente escondida en diseño del documento. 
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5. Ahora ve a la página 2. Haz una caja de texto vacía con el mismo tamaño y po- 
sición que la caja de texto hecha en la página 1 . Vuelve a la página 1 y selecciona 
la caja de texto original. Haz clic en el icono "Enlazar Marcos de Texto". Luego 
vuelve a la página 2 y haz clic en la caja de texto vacía para enlazar las dos cajas. 
Debería aparecer una línea, y el texto debería fluir en la segunda caja de texto. Haz 
clic en el botón de enlace de nuevo para apagar la opción. 
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Consejo: El texto de la Vistas > Mostrar encadenación de texto para ver cuales 
cajas están conectadas. 
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6. Haz doble clic dentro de una de las cajas de texto presiona las teclas Control+A 
para seleccionar todo el texto. Haz cambios en el estilo tipográfico usando el panel 
de Texto en la ventana Propiedades. Nuestro estilo tipográfico es Bitstream Vera 
Sans en 12 puntos con un espacio entre líneas de 14.4 puntos. Nota que el estilo 
tipográfico solo cambia en la caja de texto que ha sido resaltada recientemente. 
Necesitas seleccionar cada una de las cajas de manera que el cambio se haga en 
todo el documento. 
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Después de haber cambiado las propiedades del estio del texto, notarás que aún 
hay texto excondido en la segunda caja de texto. Debido a que Esto es solo un 
texto de ejemplo, borra un poco del texto de manera que haya espacio al final de la 
segunda caja de texto. 



Ejercicio 4: Crear Formas 



En "Tipografiía en la Retícula" creamos unidad en la página con la repetición de la 
forma y del color. Crearemos la unidad en este capítulo con la misma técnica, pero 
este vez que pondremos el cuadrado de colr en la misma posición en las páginas 
secuenciales. 

1 . Utilízala herramienta Insertar Formas y manten presionada la tecla Control para 
dibujar un cuadrado en la página 1 . Luego usa el panel de Color en la ventana de 
las Propiedades para hacerlo de color rojo usando el botón Editar Propiedades del 
Color de Relleno. 
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Consejo: Mantener presionada la tecla Control mientras mueves un objeto hace 
que se mueva diez unidades a la vez. 

Con la herramienta de la selección, arrastra el cuadrado rojo para alinear su lado 
izquierdo a la guía vertical, y la parte inferior del cuadrado con la parte superior 
del contenido. Si es necesario, puedes usar las teclas de flechas en el teclado para 
mover el cuadrado en el lugar. Sin embargo, las teclas de flechas. 
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2. Con el cuadrado aún seleccionado, escoge Editar > Copiar, luego ve a la página 
2 y escoge Editar > Pegar para crear un segundo cuadrado en la misma posición 
relativa en la página como el cuadarado en la página 1 . Usa el panel de Colores en 
la ventana de Propiedades para cambiar el color del cuadrado a cyan. 
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Ejercicio 5: Exportando un PDF 

Es importante guardar un archivo mientras se está trabajando en él. El archivo 
Scribus, designado con la extensión .sla, es un archivo nativo. Un archivo .pdf es 
el tipo de archivo más usado comunmente para compartir para ver o probar y pued- 
se ser usado también para imprimir. Cuando un archivo .sla es exportado como un 
archivo .pdf, los gráficos y las fuentes tipográficas pueden ser incluidas en el docu- 
mento, haciédolo un paquete portátil que es fácil de compartir con otras personas. 

Mientras algunas impresoras pueden imprimir archivos SLA, nosotros sugerimos 
enviar un archivo PDF a tu impresora. Enviar un archivo PDF asegura compatibi- 
lidad y es más eficiente - solo debes enviar un archivo que contiene todo el paque- 
te. 

1 . Guarda el archivo Scribus seleccionando Archivo > Guardar como. Nota que 
la extensión del archvo es .sla. Especifica un nombre y un lugar para el archivo y 
luego haz clic en el botón Guardar. 

2. Ahora exportaremos una copia del archivo como un archivo .pdf para compartir, 
ver, o imprimir. Haz clic en el botón Exportar en la barra de Comandos. 
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Puede que obtengas la ventana de "Verificación previa" en Este paso. Si esto es 
así, busca cualquier advertencia roja o amarilla y asegúrate de arreglarla. Hacer 
clic en cada advertencia the llevará al objeto referido en el documento con un bre- 
ve descripción. No vamos a explicar todos los posibles errores aqui, pero normal- 
mente son intuitivamente fáciles de arreglar. 
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Píñfft r""f ri¿l"iW 



Jiílilíüciyjj piailu 



Perfil actual: I 


————}A 




Objetos 


Problemas 


O Documento 


Se encontraron probl 




■■■■fc Normal 




-■■O Maestra A 






: -OTextol9 


Desbordamiento de ti 


T -O Copia de Maestra A 






: --OTexto22 


Desbordamiento de ti 


; Hfc Página 1 




<l 


1 ,1 



Ignorar errores 



jé "q 3Í5 ," c bm modo "id, 1 
O rnei dui. 

velit. Aliquam erat 
15 sagittis nibh sed 
:rices nial sed pede. 
orem in leo, Integer 
dunt nunc, Vivamus 
lígula tristique 
n. Proin facilisis. 
ttis lacinia mi. Doñee 
s dui. Maecenas 
/estibulum auctor r ' 
culis in, veliL Aliquam 
n a tellus. Aliquam eu 
s vulputate hendrerit, 
i. Curabitur euismod. 
irtis euismod metus, 
ia tincidunt nunc. 
iuam vel lígula 
dimentum. Proin 



l UL iii j i -i. t niu Tnus ut quam ve I 
jgula tristique co^dimentum. 



3. En la ventana Guardar como PDF, vas a encontrar muchas opciones. En la 
categoría llamada General, nota el área Exportar Rango, la cual tiene dos opciones: 
Todas las páginas y Elegir páginas. Para Este ejercicio, deja la opción Todas las 
páginas activa, de manera que todas las páginas sean exportadas. Nota el menú 
desplegable al lado de Compatibilidad en el área de Opciones de Archivo. Si sabes 
que la persona con quien compartirás Este archivo PDF tiene una versión más 
antigua de Acrobat, o si necesitas cumplir ciertas especificaciones de una imprenta 
comercial, selecciona una opcioón de Este menú desplegable para que el formato 
PDF de Este documento sea de una versión de Acrobat en particular. También de- 
bes asegurarte de chequear la configuración de la Resolución de Gráficos EPS. Si 
estás exportando para un documento que será visto en pantalla, puedes seleccionar 
72 dpi para reducir el tamaño del archivo. Si estás haciendo un documento para 
imprimr deberías dejar la resolución en 300 dpi o más, dependiendo de la impreso- 
ra. 
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- Exportar a archivo: 

|./ejercicio.pdf| 

I - Exportar un archivo por cada página 



Cambiar... 



General Tipografías Extras Visor Seguridad Color j 



-Exportar rango 

(• Todas las páginas 
C Eligir páginas 



1 


Rotación: 


|0- 




A 


m i 


m 


1 



V Ajustar a márgenes de página 



-Opciones de archivo- 
Compatibilidad: | PDF 1.4 ~^\ 
Encuademación: | Margen izquierdo ^] 
I - Generar miniaturas 

V Guardar marcos de texto enlazados como artículos PDF 

V Incluir marcadores 

r 

Resolución de gráficos EPS: |300 dpi tJ 



|7 Comprimir texto y gráficos vectoriales 

Método de compresión de Imágenes 

Método de compresión: 
Calidad de compresión: 
V Remuestrear imágenes a: 



I Automático 
| Máximo 



"3 

"3 



Guardar I 



Cancelar 



4. También chequea la pestanilla de Tipografías. Cada fuente tipográfica listada 
bajo Tipografías Disponibles debería estar incluida en Tipografías a Incrustar. Pue- 
des hacer cilc en Incrustar Todo. Ahora haz clic en Guardar y crea el PDF. 



~m 



w 
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- Exportar a archivo: 

(./ejercicio.pdf 

I - Exportar un archivo por cada página 



Cambiar... 



General | Tipografías I Extras | Visor | Seguridad | Color | | 



■Incrustar 

Tipografías disponibles: 



Tipografías a incrustar: 



Ti Bitstream Vera Sans Bold 
Ti Bitstream Vera Sans Román 



Bitstream Vera Sans Bold 
Bitstream Vera Sans Román 



Incrustar todo 



JJ 



Tipografías a contorno: 



Todo a contornos 



Guardar I Cancelar 
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5. Abre el archivo PDF en un visor de vista previa. Nota que el archivo abre de 
manera rápida, pero es difícil o imposible de editar. Para modificar Este documen- 
to, deberías abrir el archivo nativ SLA de Scribus. 



Archivo Editar Ver |r Ayuda 



" Siguiente 



de 2 



Ajuste óptimo 




Unidad en la Retícula 



Lorem ¡psum dolor sit amet, consectetueradipiscing s I ti. 
Ut a sapian. •Miquam aliquat purus molestie dolor. Integar 
quis eres ut erat posueredictum. Curabiturdignissim. 
Integer oici. Fusce vulputate lacus at ¡psum . Quisque ¡n 
libara ría: mi lasreat volutpat. Aliquam cus pada. 
scelerisque quis. tristique cursus. placerat convallls. velit. 
Nam condimentum. Mulla ut maurts. Curabrturadipiscing, 
maurts non dictum allquam, arcu risus dapibus diam, neo 
sollicitudin quam erat quis lígula. Aenaan massa nulla. 
volutpat eu, 3:;ums5n et. Fringilla eget, odie. Nulla 
plararat porta justo. Mulla vitae turpis. Praesent 
¡acus.Cum sociis natoque penatibus et magnis dts 
parturient montes, nascetur ridiculus mus. Maecenas 
tortor metus, pellentesque nec, vehicula vitae, suscipit 
sed , q uam . Ae nea n ste le risq ue soda les te rto r. Sed p u rus . 
Curabitur turpis est, bibendum tristique, porttitortempor, 
pulvinarvitae. tortor. Mullam malesuada dapibus orri. 
Vivamus aliquet tempus velit. Curabitur interdum posuere 
risus. [>uts egestas, ¡psum sit amet molestie tincidunt, 
lígula libero pretium risus, non fauclbus tellus felis mattls 
saplen. Ut eu velit at massa auttor mattis. Nam tristique 

Vivamus ñeque velit. ornare vitae. tempor vel. ult rices et. 
wtsi. Cras pede. Phasellus nunc turpis, cu rsus non, 
rhoncus vitae, sollicitudin vel, velit. Vivamus suscipit 
lorem sed felis. Vestibulum vestí bulum ult rices turpis. 
üorem ¡psum dolor sit amet, consectetuer adipisE ¡ng elil. 
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Páginas Múltiples: Tensión, Caos, 
Desorden 

Un ejercicio común en el diseño de impresos es un desplegable de tres caras, 
conocido como tríptico. Un tríptico es una página de papel, doblada dow veces 
en una tercera párate del la longitud o el ancho de la página impresa. Típicamente 
esto puede ser hecho en una hoja tamaño carta con orientación horizontal (11 por 
8.5 pulgadas / 21 .6 por 27.9 cms). El área doblada puede ser concebidos como los 
lugares dond e debes evitar colocar texto. Las imágenes pueden estar a lo largo de 
un doblez, pero sólo si son mucho más grande que el área doblada. 

Para este capítulo, usaremos el tríptico como una plataforma para aproximarnos al 
diseño gráfico que se resiste a las normas de la retícula. Creando tensión con un 
sentido de caos en la tipografía y las imágenes fue parte de la estética anti-arte de 
los Futuristas, Constructivistas y Dadaístas a principios del siglo 20. La inisisten- 
cia de alejarse de la superficie rígida de la retícula volvió a ser visto en los últimos 
años del siglo 20 cuando los diseñadores tomaron interés en una interpretación mas 
subjetiva del contenido que estaban diseñando. El trabajo de Neville Brody para 
la revista Fuse y el de David Carson para la revista Ray Gun son ejemplos que no 
pueden ser dejados afuera en este párrafo. Es importante notar que a pesar de que 
la estética del trabajo Brody y Carson se siente tan caótica como un montaje hecho 
por Hannah Hoch o Raoul Haussman, los Dadaístas (especialmente los alemanes) 
estaban motivados por sus sentimientos pasionales hacia la Primera Guerra Mun- 
dial y la Revolución Industrial. 

El trabajo de Carson es referido con frecuencia como "desconstrucción" en el 
diseño gráfico. En un documental hecho por Hillman Curtís sobre David Carson 
(puedes verlo en el enlace siguiente http://www.hillmancurtis.com/index.php7/film/ 
watch/david_carson), Carson dice "Cuando empecé a hacer revistas sólo hice lo 
que tenía sentido para mi. Leí un artículo e intenté interpretarlo... de manera que 
al volvernos más computarizados, peinso que es más importante que nunca que el 
trabajo sea algo más subjetivo, más personal... de manera que puedas poner lo que 
eres como persona en el trabajo que haces". 

Desconstructivismo es también un movimiento filosófico liderizado por Jaques 
Derrida en los años 1960, donde la estructura del sistema lingüístico es revelado 
a través de un análisis crítico de su aplicación. La interpretación de Carson sobre 
el trabajo que diseñó en Ray Gun, trata de exponer el significado por debajo de la 
copia en el diseño gráfico. 

Mientras el tríptico es considerado con frecuencia como algoa experimental, 
nosotros lo haremos con el desconstructivismo en mente. La copia para diseñar es 
parte del Manifiesto Dadaísta de Tristán Tzara (incluido en el disco y disponible en 
la red). El primer ejercicio es la parte frontal de una página. El segundo ejercicio 
es el diseño de la parte posteriror de la página. Al terminar los ejercicios, podrás 
imprimir la primera página, voltear el papel e imprimir la segunda página por el 
lado posterior. Dobla el papel en tercios y de esta manera podrás crear un tríptico. 
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Mientra que el diseño parece ser caótico, tenso y desordenado, algunas de las cajas 
de texto serán cubiertas por otras porciones de texto. Las imágenes cubrirán pala- 
bras. La tipografía será puesta en columnas estrechas y la jerarquía será estableci- 
da a través del contraste, la escala y el valor. 

Resultados de los ejercicios del capítulo 14 
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Cuando ambos ejercicios son completados, el archivo de Scribus contendrá dos 
páginas. Imprime la página uno en una hoja de papel y la página dos en la parte 
posterior de la misma hoja, después dobla la hoja en tercios para crear un tríptico. 

Antes de comenzar: 

Necesitarás descargar los siguientes archivos de este enlace http://www.digital- 
foundations .net/downloads/floss 

dada-title.png, dada-manifesto.odt, y hand.png 



Ejercicio 1: Usando imágenes, cajas 

de texto, y la tipografía para crear la tensión 

l.Crea un nuevo documento de 2 páginas. Usa el tamaño carta con orientación 
horizontal. 



i * 



Miiajíi dusuiuiíjíu 



■Disposición del documento- 



iiiA ii.mjw .iiJ 

Página doble 



Página triple 
[tríptico) 



La primera página es: 

I n 



■Tamaño de página 
Tamaño: 




Orientación: j; j^J 

Anchura: 1 792.00 pt Jj Altura: |6i2.oo pt jj 



~J 



■Guías de margen 

Disposiciones predefinidas: 

Izquierda: Uo.00 pt ^ 

Derecha: 
Superior: 
Inferior: 



|40.QQ pt 
|40_00 pt 



1 
1 

|40_00 pt §¡ 

Márgenes de impresora... | 



■Opciones 

Número de páginas: [ _ ~j 

Unidad por defecto: I Puntos (pt* _▼] 



\~ Marcos de texto automáticos 

i 



3 



Aceptar I 



2. Haz doble clic en la página maestra llamada Normal en la ventana Ordenar Pági- 
nas. Crea dos guías en la página maestra llamada Normal de la regla izquierda con 
la herramienta de selección para dividir la página en terceras partes. Agrega una 
guía a unas 7 pulgadas desde la regla ubicada en la parte superior de la página. 
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t Archivo Editar 



Insertar Página Vista Extras Script Ventanas Ayyda 






1-1. . , f>, , . II. . . |2. . . II. 



ií. . . is. . . i?. . . ib. . , ii. t . iiq . . m . . m 



LJÍ! 



~3F 



,| „., j. „|„„„ .j 



y 



T 






X-Pds: 9.5000 ¡n hf-Pos: -0.3519 



3. Cierra la ventana Editar Páginas Maestras. Usando la herramienta Insertar 
Marco de Imagen, dibuja un marco de imagen en cualquier lugar de la página 2 (el 
tamaño realmente no es importante). 






i Archivo Editar Objeto Insertar Página Vista Extras Script Ventanas Ayyda 



|!. . . I«. . . I'. . . |B. . , I». , . |10 , , lll . , |I! . 



íl_ ■ JB 



~3F 



,| „,. -i. „|™. j 



y 



T 






X-Pds: 0.0925 ¡n Y-Pos: -0.3143 



4. Haz clic con el botón derecho del ratón en el marco de imagen y selecciona 
Obtener Imagen... del menú contextual. Navega al directorio donde guardaste la 
imagen llamada dada-title.jpg y selecciónalo. 
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> Archivo Editar 



Objeto Insertar Página Vista Extras Script Ventanas Ayjda 






m . . m 
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• Imagen visib 
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de vista 
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i ► 


Atributos... 


Bloqjeado 






Ctrl+L 


Tamaño bloqjeado 




Ctrl+Shift+L 


Enviar al álbj 


mdere 


artes 




Nivel 






> 


Convertir en 






' 


Cortar 






Ctrl+X 


, Copiar 






Ctrl+C 


Borrar 








Contenidos 






> 


Propiedades 






F2 



|i. -j|„.»« a^nw- -i 



T 



X-Pos: 4.5185 



¡ "F 



5. La imagen puede que no quepa en el marco que creaste, pero no te preocupes. 
Haz clic con el botón derecho del ratón y selecciona Ajustar Marco a Imagen. 






Btjotg 



» Archivo Editar 



Objeto Insertar Página Vista Extras ¿cript Ventanas Ayoda 






ii° . . m . 



Obtener imagen... Ctrl+D 

•f Imagen visib Se 

Conf gjradón de vista previa 
Efectos de imagen Ctrl+E 

Editar imagen... 
Actualizar imagen 

Atributos... 



Bloqueado Ctrl+L 

Tamaño bloqueado Ctrl+Shift+L 

Enviar al álbum de recortes 
Nivel 

Convertir en 



~3F 



Cortar 

Borrar 
Contenidos 



Ctrl+X 
Ctrl+C 



rrra3T[5773S3 m — [ttos: 5.0000 ín 



y 



6. Mientras que la imagen es seleccionada, abre el panel de Imagen en la ventana 
de Propiedades y selecciona Escalar al Tamaño del Marco. Asegúrate de mantener 
presionada la tecla Control mientras cambies el tamaño de la imagen para mante- 
nerlo proporcional. 
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■t Archivo Editar Objeto Insertar Página Vista Extras Script Ventanas Ayyda 

j 3Q9 a ¿t|l-^-^- <, i n]~ 
^HiiD'QVj-- ¿.-do, 4dmiB x y|l-^]- 



dUC 
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Propiedades 



r Escalado librs 



XDPI actuales: 
? dpi actuales: 



f? Escalar al tamaño del marco I 
W Proporcional 




~3F 
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T 



X-Pds: 4.5371 



■^ 



7. En la página dos, la base de la línea "Manifestó" deberá estar sobre la guía que 
se encuentra a 7 pulgadas. La letra "e" de la palabra Manifestó tocará de manera 
muy sutil el borde de la página. 






BOJE 
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X-Pds: 13.7222 bl Y-Pos: -0.79&3 ¡n 



8.Crea una caja de texto y escribe "Tristan Tzaras". Nosotros usamos la fuente 
tipográfica Bitstream Vera Sans en el estilo regular a 24 puntos y el espacio entre 
las líneas de 28.0. Para el resto de este capítulo preferiremos una fuente tipográ- 
fica, estilo, tamaño en puntos e interlineado como el siguiente: Fuente Tipográfica 
tamaño del estilo/interlineado. Por ejemplo, usamos Bistream Vera Sans Regu- 
lar 24/28.0. Haz clic con el botón derecho del ratón en la nueva caja de texto y 
selecciona Nivel > Bajar al fondo. Ubica el texto justo bajo los dedos como en la 
imagen de referncia. Haz clic en la herramienta Rotar Objeto de la barra de co- 
mandos y haz clic y arrastra la caja de texto. El texto rotado es el único elemento 
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en esta parte doblada del papel que no será horizontal en la retícula. La rotación 
crea contraste. A pesar de que las letras están parcialmente escondidas entre los 
dedos, el espectador será dirigido a la tipografía. El contraste es creado debido a la 
ruptura en el uso repetitivo de la retícula. 






1$ Archivo Editar Objeto Insertar Página Vista Extras Script Ventanas Ayjda 




9. Haz clic en el título gráfico y presiona Control+C para copiarlo. Ve a la página 
1 y pégalo usando Control+V. El gráfico se encuenta ahora en la misma posición 
relativa en las dos páginas. En la página uno, presiona la tecla Control y usa la 
herramienta de selección para mover el gráfico hacia el margen izquierdo. Nota 
donde la letra "e" en "Manifiesto" se encuentra en relación al margen izquierdo. 



,.ji í W^,;.^,», ) „B1B 
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10. Crea una nueva caja de texto en el área de trabajo, fuera del margen derecho de 
la página uno. Haz clic con el botón derecho del ratón en la caja de texto, y selec- 
ciona Añadir Texto... del menú contextual. Selecciona el documento OpenOffice 
"manifiesto-dada .odt". La ventana Opciones de importación de Open Document se 
abrirá - deje las opciones tiene por omisión y haz clic en Aceptar. Si el programa 
abre otra ventana para reemplazar una fuente tipográfica no instalada, simplemente 
selecciona una de las fuentes tipográficas disponibles en tu computadora. Después 
de esto, todo el cuerpo del texto será cargado en la caja de texto. 
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11 . Para el tríptico, usaremos diferentes cajas de texto .Enlazaremos las cajas de 
texto como lo hicimos en el capítulo 1 3 , pero esta vez estableceremos cortes te 
texto de manera que la cantidad de texto en la caja no cambie cuando el tamaño de 
la caja sea modificada. Un corte de texto es como un corte de página en un proce- 
sador de palabras (como OpenOffice.org). 

Dibuja nueve cajas de texto nuevas (el tamaño y la posción podrán ser ajustadas 
luego). Selecciona la primera caja de texto y haz clic en la herramienta Enlazar 
marcos de texto para enlazarlos uno a uno. Mientras haces clic en cada caja, el 
texto fluirá de caja en caja. Cuando las diez cajas estén enlazadas, haz clic en la 
harramienta Enlazar marcos de texto de nuevo para apagar el modo de enlace. 

Existen varias manras de crear cortes de línea en el documento fuente. Necesita- 
mos crear un corte de caja en cada uno para evitar que el texto se mueva entre las 
cajas. Haz doble clic en cualquiera de las cajas de texto para seleccionarlo. Ubica 
las palabras de "mayor importancia" en el primer párrafo. Ubica tu cursor justo 
después de la palabra de importancia y presiona Control+Return. Esto agregra- 
rá un corte, y la próxima línea se moverá a la parte superior de la caja siguiente. 
Ahora repite este proceso en las palabras "organise prose," "Ufe in the," natural 
- and," "novelty - we are," "crucify boredom," "against manifestos," and "self-de- 
fining story." Tal vez necesites cambiar el tamaño de las cajas a medida que vayas 
haciendo esto, de manera que el texto rellene cada caja siguiente en la vista. 
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Selecciona la última caja (empezando con "DADA MEANS NOTHING") y coló- 
cala en la página 2. Vuelve a la página 1 . 
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12. Haz clic con el botón derecho del ratón en cualquier de las cajas de texto y se- 
lecciona Editar Texto... del menú contextual. Esto abrirá todo el texto en el Editor 
Interno. Selecciona todo el texto con Control+A y usa los controles en la parte 
superior del Editor Interno para cambiar la fuente a Bitstreams Vera Sans Román 
12/14. 



Luego, seleccina Editar > Editar Estilos. Haz clic en Nuevo. Nombra tu estilo 
estilo_dada_l . Seleccoina Bitstram Vera Sans del menú desplegable Carácter. 
Establece el tamño del texto a 12 puntos. Presiona el botón Aceptar. Vuelve a 
presionar el botón Aceptar en la ventana Editar Estilos. Ahora presiona Control+A 
para seleccionar todo el texto en el Editor Interno y usa el menú desplegable en los 
estilos y aplica en nuevo estilo creado estilo_dada_l . Para cerrar el Editor Interno 
y volver al documento principal, selecciona Archivo > Actualizar marco de texto y 
salir del programa. 
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Párrafo actual: 
Palabras: 64 



Caracteres: 348 



Totales: 

Párrafos: 9 Palabras: 964 Caracteres: 5521 
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13. El resto del ejercicio se enfocará en cambiar varias características del texto. En 
ciertos momentos abriremos el Editor Interno para asignar nuevos estilos a párra- 
fos enteros, y otras veces simplemente seleccionaremos palabras específicas y las 
cambiaremos usando el panel Texto de la ventana de Propiedades. No será siempre 
claro por que seleccionamos hacer una opción o la otra, pero esperamos que tenga 
sentido el cómo hacer las dos versiones de edición. 

Haz doble clic en la primera caja de texto para seleccionar el texto dentro de ella. 
Haz clic con el botón derecho y selecciona Editar Texto... del menú contextual. 
En el Editor Interno necesitarás agregar un corte de línea para crear nuevos estilos 
para cada sección. Notarás que el panel de la izquierda se divide cada vez que 
presionas la tecla Return. Este panel indica el estilo para cada párrafo. 
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[rhe magic of a word DADA which forjournalists has opened the door to an 

unforeseen worid, has for us not the slightest importance. 

To launch a manifestó yoj nave to want: A.B. & C, and fulmínate against l r 

2, & 3, work yourself up and sharpen you wings to conquer and circuíate 

lower and upper case As, Bs & Cs P sign P shout, swear, organise prose 

into a form that is absolutely and irrefutably obvious, prove its ne plus jltra 

and maintain that novelty resembles life in the 

Qsame way as the latest apparition of a harlot proves the essence of God. His 

existence had already been proved by the accordion, the landscape and soft 

words. To impose one's A.B.C. is only natural - and 

Qtherefore regrettable. Everyone does it in the form of a 

crystalbluff-madonna, or a monetary systern,. or pharmaceutical 

preparat¡ons P a naked leg being the invitation to an ardent and sterile 

Spring. The love of novelty is a pleasant sort of cross, it's evidence of a naive 

don't-give-a-damn att¡tude P a passing, positive P sign without rhyrne or 

reason. But this need is out of date, too. By giving art the Ímpetus of 

supreme simplicity - novelty - we are being human and true in relation to 

innocent plea&jres; impulsive and vibrant n order to crucify boredom. At the 

liqhted crossroads, alert, attentive, lying in wait for years, in the forest. I am _IJ 



Párrafo actual: 
Palabras: 24 



Caracteres: 132 



Totales: 

Párrafos: 12 Palabras: 964 Caracteres: 5527 



14. Haz clic con el botón derecho en la etiqueta estilo_dada_l que aparece a la 
izquierda del primer párrafo. Selecciona Editar Estilos... en el menú contextual. 
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I estilo_dada_l ^jwhich forjournalists has opened the door to an 

^■L not the slightest importance. 

lAÉSHsfllÉ N , lave to want: A.B. & C, and fulmínate against 1 P 

2, & 3 P work yourself up and sharpen you wings to conquer and circuíate 
lower and upper case As, Bs & Cs P sign P shout, swear, organise prose 
into a form that is absolutely and irrefutably obvious, prove its ne plus ultra 
and maintain that novelty resembles life in the 

Qsame way as the latest apparition of a harlot proves the essence of God. His 
existence had already been proved by the accordion, the landscape and soft 
words. To impose one's A.B.C. is only natural - and" 
Qtherefore regrettable. Everyone does it in the form of a 
crystalbluff-madonna, or a monetary systern,. or pharmaceutical 
preparations P a naked leg being the invitation to an ardent and sterile 
Spring. The love of novelty is a pleasant sort of cross, it's evidence of a naive 
don't-give-a-damn attitude P a passing, positive P sign without rhyrne or 
reason. But this need is out of date, too. By giving art the ímpetus of 
supreme simplicity - novelty - we are being human and true in relation to 
innocent plea&ures; impulsive and vibrant n order to crucify boredom. At the 
liqhted crossroads, alert, attentive, lying in wait for years, in the forest. I am _IJ 



Párrafo actual: 
Palabras: 24 



Caracteres: 132 



Totales: 

Párrafos: 12 Palabras: 964 Caracteres: 5527 
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En la ventana Editar Estilos que se abre, selecciona manifiesto_dada_l y haz clic 
en Duplicar. Esto abrirá la ventana Editar Estilo para un nuevo estilo. Cambia el 
nombre a manifiesto_dada_2. Cambia la alineación del párrafo de manera que esté 
jusficado a la derecha. Presiona la tecla Aceptar cuando termines. 
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15. Ahora tenemos un segundo estilo en la ventana Editar Estilos. Presiona el 
botón Aceptar para volver la Editor Interno. Haz clic en la etiqueta maninesto_ 
dada_l que aparece a la iquierda del primer párrafo. Esta vez, selecciona mani- 
fiesto_dada_2 del menú desplegable en el menú contextual que se abre. Nota que 
el primer párrafo está alineado a la derecha. Presiona en la imagen del visto verde 
en la parte superior de los iconos para confirmar el cambio y cierra la ventana del 
Editor Interno. 
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Párrafo actual: 
Palabras: 24 



The magic of a word DADA which forjournallsts has opened the door to an j 
unforeseen worid, has for us not the slíghite&t importance. 
To launch a manifestó you have to want: A.B. & C„ and fulmínate agalnst 1. 
2, & 3. work your&elf up and sharpen you wings to conquer and circuíate 
lower and upper case As, B& tk Cs P sign, shout, swear, organise prose; 
into a form that is absolutely and irrefutably obvious r prove its ne plus ultra 
and maintain that novelty resembles life iri the 

□same way as the latest apparition of a harlot proves the essence of God. His 
existence had already been proved by|the accorditm, the landscape and soft 
words. To ¡mpose one's A.B.C. ¡s only natural - and 
Qtherefore regrettable. Everyone does ¡t ¡n the form of a 
crystalbluff-niadonna, or a monetary system, or pharmaceutical 
preparat¡ons P a naked leg being the invitation to ai ardeit and sterile 
Spring. Tlie love of novelty is a pleasant sort of cross r it's evidence of a naive 
don't-give-a-damn att¡tude P a passing, pos¡tive P sign without rhyrneor 
reason_ But this need is out of date, too. By giving art the ímpetus of 
supreme simplicity - novelty - we areibeing human and true in relation to 
innocent plea&ures; impul&ive and vlbrant n order to crucify boredom. At the 
lighted crossroads, alert, attentive, lyinq in wait for years, ¡n trie foresta I am j 
Totales: 
Caracteres: 132 Párrafos: 12 Palabras: 964 Caracteres: 5327 



16. Haz doble clic en la primera caja de texto. Selecciona "The magic of a word" y 
luego selecciona el tamaño de la fuente 9 y el estilo de texto itálico del panel Texto 
de la ventana Propiedades. 
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Ahora selecciona "DADA" y ponió en negrita 30. Agrega un número de espacios 
con la tecla Return entre las palabras "slightest" e "importance". Juega con el 
texto hasta que se vea como el texto de la imagen a continuación. Una vez que el 
texto esté listo, selecciona Editar Forma... del panel Forma en la ventana de Pro- 
piedades. En la ventana Nodos que se abre, haz clic en Cizallar horizontalmente el 
trazado a la izquierda un número de veces para torcer la caja de texto. Haz clic en 
Terminar Edición cuando termines. 
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17. Coloca la caja de texto de manera que la palabra "importance" quede justo 
sobre la letra A. Nota también quela "h" en "has" (en la segunda línea) casi no está 
dentó de la página. 
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18. Haz doble clic para seleccionar el texto en la próxima caja de texo. Haz clic 
con el botón derecho del ratón y selecciona Nivel > Bajar al fondo del menú con- 
textual. Esto posicionará el texto "debajo" del título gráfico. Cambia la palabra 
"up" a negritas itálicas 30 puntos. Selecciona "and sharpen your wings" y cam- 
bíalo a 4 puntos. Luego aumenta el espacio entre las letras (o kerning) usando el 
panel de Texto de la ventana de Propiedades. Observa nuestra ilustración para 
major claridad. 
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19. Usa la ventana Editar Formas de nuevo para hacer que el texto se incline hacia 
la letra A. 
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20. Haz clic con el botón derecho del ratón en la tercera caja para abrir el Editor 
Interno. Haz clic en cualquiera de los estilos en la parte izquierda y luego Editar 
Estilos. Duplica manifiesto_dada_l y cambia el nuevo estilo (manifiesto_dada_3) 
a Bitstreams Vera Sans Regular 9/18. Aplica este estilo al contenido de la tercera, 
cuarta y quinta cajas de texto. Cierra el Editor Interno. 
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Lorem ípsurn dolo 1 ¿ L dineL. uür.-.-siU.vUv' ,■•■.! :, .-,; i;-:- s¡. I. U! ~ ■,„.'.. isn. Akquarri 
ar. Ititegef quis eroí. ut erat posuere dletum. Curabitur dignlsíim. Integer ore 
s-urn. Quisque in libero nec mi lacreet vuluLpaL. Allquam eras pede, icelerisqu 
plaeerat cúnijallls, uellt. ¡Mam candi me ntum. Nolla ut mauris. Curabirur adlpii 
aliquam, arcu risus daplbus diam, nec so 1 1 id bu din quam erat quls lígula. Aene- 
eu, aecums-an et, fririgilla eget, odio. Molla placeraL perita Justo. Mulla vitae tu 
laeus.yestioiJium- ante ipsum primis In faudbus ord lucros et uUTÍMS posuere 
ultrlcies lacus eu dui. Duis viverra risus et eros. Aenean odio dolor, tristique q 
sit amet, dui. Peí lente sq o e velit. Allquam erar, i/olutpat. Duissaginls nlbrí sed 
pede. Sed tempor lorem in leo. Integer grávida tlnddunt nunc. Vivamus ut qj 
condimentom. Praln faelHsIs. Allquam sagittis lacinia mi. Doñee sagittls luetu 
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Qsame way as the latest apparition of a harlot protíes the essence of God. His 

existente had already been proved by the accordish, the landscape and soft 

words. To impose one's A.B.C. is only natural - and 

Qtherefore regrettable. Everyone does it in the form of a 

crystalbluff-madonna, or a monetary system, or pharmaceutical 

preparations r a naked leg being the invitation to an ardent and sterile 

Spring. The I ove of novelty ¡s a pleasant sort of cross, it's evidence of a naive 

don't-give-a-damn attitude, a passing, positive, sign without rhyme or 

reason. But this need is out of date, too. By giving art the Ímpetus of 

supreme simplicity - novelty - we arejbeing human and true in relation to 

innocent pleasures; impulsive and vibrant n order to crucify boredom. At the 

lighted crossroads, alert P attentive, lying in wa-it for years, in the forest. I am ^J 



Párrafo actual: 
Palabras: 5 



Caracteres: 32 



Totales: 
Párrafos: 



23 Palabras: 959 Caracteres: 3529 



21 . Coloca las tres cajas en el centro de la columna de la página, cambia el tamaño 
para que se vean de manera similar a nuestra imagen. 
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22. Crea un nuevo estilo de igual manera como hicimos en anterior y llámalo 
manifiesto_dada_4. Establece la tipografía en Bitstreams Vera Sans 18/14, lo cual 



226 



Páginas Múltiples: Tensión, Caos, Desorden 



ajusta un poco el espacio entre las líneas y crea tensión en la tipografía. Las letras 
se sobrepondrán porque el espacio entre las filas de letras será más pequeño que el 
tamaño de las letras. Este tratamiento tipográfico puede ser difícil de leer. Sin em- 
bargo, en un tamaño de fuente mayor que el del cuerpo (típicamente 9-11 puntos), 
una pequeña sección del texto con un espacio entre líneas ajustado crea tensión y 
se mantendrá legible. Inserta unos cuantos espacios con la tecla Return antes de 
"boredom" en la parte inferior de la caja de texto. En la imagen siguiente, puedes 
ver como las características de la tipografía fueron usados, pero trata de ver esto 
con tus ojos e intuición. 
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23. Selecciona la siguiente caja de texto, ubícala y cambia su tamaño, de manera 
que quepa en la parte inferior derecha del la columna central de la página. Duplica 
manifiesto_dada_3 para crear un nuevo estilo (manifiesto_dada_5) y cambia este 
nuevo estilo de manera que esté alineado a la derecha. Asigna este nuevo estilo 
a el texto. Cierra el Editor Interno. Selecciona la herramienta Cuentagotas de la 
barra de comandos y haz clic en el color rosado de la letra "A" en el título gráfico. 



Ejercicio 1 : Usando imágenes, cajas de texto, y la tipografía para crear la tensión 
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Esto abrirá la ventana Color no Encontrado. Coloca un nombre. Nosotros usamos 
"rosado_dada" . Haz clic en Aceptar para agregar este color al panel Colores en la 
ventana de Propiedades. Haz doble clic en la caja de texto para seleccionar el tex- 
to. Resalta "and in principie I am against manifestos.". Selecciona el panel Texto 
de la ventana de Propiedades y selecciona rosado_dada del menú Relleno de texto. 

24. Resalta el resto del texto en la caja y abre el panel Texto de la ventana de Pro- 
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porcentaje de opacidad. Haz clic en este botón y selecciona 50% para modificar el 
texto de manera que sea gris. 
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Ejercicio 1 : Usando imágenes, cajas de texto, y la tipografía para crear la tensión 
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de la guía (Control+Right Arrow) y asígnale el estilo estilo_dada_l . 
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última, de manera que algunas palabras se esconderán. Asígnale el estilo esti- 
lo_dada_3. Con la caja de texto seleccionada, selecciona el panel Colores del la 
ventana Propiedades. Selecciona rosado_dada en la última parte de la lista de 
colores. Esto hará que el fondo del texto sea de color rosado. Selecciona el texto 
y usa el menú desplegable Relleno de Texto en el panel de texto en la ventana de 
Propiedades para hacer el texto de color blanco. 

27. Mientras que el rosado y el blanco de la caja de texto esté seleccionada, selec- 
ciona en panel forma en la ventana de Propiedades. En el área Distancia del texto, 
agrega 10.00 de espacio a las áreas correspondientes a la Izquierda y Derecha. 
Esto agrega un espacio en nuestra caja de texto. 

28. Crea una nueva caja de texto. Escribe 'Tm writing this manifestó to show that 
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you can perform contrary actions at the same time, in one single, fresh breath;". 
Esta es una cita del manifiesto de Tzara, que puede copiar y pegar si los consigues 
en el documento de Open Office. A veces es más rápido escribir en vez de copiar 
y pegar. Crea un nuevo estilo para este texto, manifiesto_dada_5 y establécelo 
como Bitstreams Vera Sans 60/68 negrita cursiva. Adicionalmente, haz el color de 
relleno de texto rosado_dada, y la opacidad del texto a un 70%. 
Coloca y cambia el tamaño de la caja de texto de manera que llene dos terceras 
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partes de la página, y luego haz clic con el botón derecho del ratón y selecciona 
Nivel 1 > Bajar al fondo. 

29. Si abres en menú Vistas, verás diferentes opciones de vista disponibles. Estas 
vistas hacen posible editar el proyecto en este ejercicio. Para una vista preliminar 
del producto, apaga todo lo que esté activo en el menú Vistas excepto Mostrar Imá- 
genes. La imagen siguiente, muestra como debería verse la primera página. Luego 
vuelve a encender todas las opciones y habrás terminado el primer ejercicio. 
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yet l'm saying 
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Ejercicio 2: Usando opciones, tonalidad, y 
la saturación del marco de texto para crear 
contraste en la página dos 

1. Comienza reposicionando la caja de texto de la página dos en la primera co- 
lumna y enlaza el texto faltante en una nueva caja en la segunda columna. Haz un 
nuevo estilo para este texto (manifiesto_dada_6) y establécelo como Bitstreams 
Vera Sans Regular 10/12. 
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PACÍA D0E5 HOT NEAN ANYTHING 



if we c&nsJdeí Itfutlle, and lf we don't wia&te 
aur ti me overa word that doesn't mean 
anythirHa... The lirst thowGhtíhar. comes te 
these rnindi is of a bactft' Dl;>g ca sn.le-. st 
least ta discover its etymolagical, historical 
jr psyíhoioglcaí meanlng, we read ín the 
papers that the negrees of the Kroc race cali 
[he ta ¡i of a sacred c ow dada, a cube, and a 
mother, in a certain región of ltaly r are 
ca lled ; DADA. The word for a hobby hof se, a 
íhlWren'í nurse, a dovbie offlrmatliM In 
Russian and Romanian, isalso: DADA. Some 
iearn-ed jímifiaiísts see ¡t as an art re* 
Dables, other 

lesuscallingthelittíechildrenuntohim safnts 
¡ee It as a »etum to an unemotlonai and 
noisy primitivism - noise and monotanous. A 
swistttvtty canrwt be buül on íhe bas¡s of a 
rtord, every sc-rtof cors^rjet or. converges 
¡nto a boring sort of perfection, a stagnant 
n>a m a ■gt>iclpf swamn. a relative humar, 
product. A ivork of art shouldn't be beauty 
vi;- íc. bL't*ust: i i i dead; ncilhíi gjay ñor 
sad, neither hght ñor darle; ir is to rejoice or 
maltreat individualities to serve them up trie 
:ákes i>f sa¡rtte<ihaloesíirtliesweat sí a 
Tieandering cnase tfKOLgn the atmosphere. 
A württ of art ¡s nevar beautifui, by deaee-, 
obfectively, far everyoiie. íritícism is. 
therefare, use ess: 't onlv^aists subjectively, 
for e^ery individual, and wi-throui the 
sligfitest general crtaracteristii. Do peo pie 
imagine theyhav* round the psyíhit basis 
commün tq. all humanity? The attempt of 
lesus r and the Bible. conceal, under their 



imple, benevolent wings; shit. animáis ánd 
íeys. how can enyane nape to arder the 
c^aos that constituyes that infinite, formless 
/ariation; man? The principie; "Leve thy 
íeighbour" ts hyp-ocrisy. "(ínow thyself" is 
jtopian. but moré acceptable because it 
ndudes malice. No pity. Aftef trie camage we 
are left with the hoce of a puní ed human ity. I 
>|ways speak atwut myselí becau&e I don't 
ivant to Cíirwlnce, si'd I nave no hght to drag 
Stliers in my wake, l'm riel cómpélling anyene 
;o íollow rrte r beíause e^e-ryorie malíes nls art 
n his own way, if he fcnows anythin^ about 
:he joy tuat ílses ük? an arraw up to the &s.trel 
:trata, or that »vhich Oescends into the mines 
itewn with the flowers of corpíes and fertilé 
¡pa&ms. StalíCtites: look e-verywhere for 
them, in creches rragn lied by pain, eyes as 
NhtBk a& angieis" hares^ Trus DADft was bom, 
sut of a need forindependenoe, outof 
nistrust for tha commumty. Pecple who join 
js, teep thelr freedom. we cknvt ac«pt an¡ 
:heories. We've had enough of the cubist aÑ.< 
'uturistaíademiesrisboratorieier roímal '-.. r 
deas. Doive matee art in ordertoearn rrorey 
ind keep tha dear bourgeoisie happy? 
^hymes ha«e the smack of money. and 
nfleüion slides along the line of the stomaeh 
n profüe . Every gíoup- &r artistí has endeíl u p 
it this bank, straddh ng varióos comees, 
^aving the cfocH - open to Ihe possibilily of 
wallowlng In comfort and lood. 

L91C AT THE CABARET VOLTAIRE, ZURICH 
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X-Pos: 12.Z265 in Y-Pos: -0.1257 in 



2. Seleccione el título "DADA DOES NOT MEAN ANYTHING" y cambia la ti- 
pografía a Bitstreams Bold Oblique 21/25.2. Establece el color de relleno del texto 
a rosado_dada. Crea un nuevo marco de imagen con la herramienta Insertar Marco 
de Imagen. 



Ejercicio 2: Usando opciones, tonalidad, y la saturación del marco de texto para crear 
contraste en la página dos 
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!t we consider it f otile, and if v.e don't waste 
áur time Gver a wórd that tioesn't mean 
anythlrK|... The flr&t thüu.ght that co<vies to 
these m nds is of a bacteriológica^ order. at 
least to aispover ¡-es etymoiCHQi'CaL histofitai 
sr psycriologlcal meaning. We read in the 
papers that the negrees of the Kroo race cali 
the tan of a sacred cow: dada, a cube, and a 
Tiother, i n a certain región of Italy, are 
callad; dada. The word ro* a fto&by ncw&e, a 
.■{-■■■■ nurse. a den I. >■ afflrmative in 
Russian and Remanían, is also: DADA. Some 
leam-edloumaiists &ee it as anartfor 
Dables, ather 

lesuscai|irigtneiiHiech.iidFeriu"itoh¡m saints 
;ee Itas a retum te an unemütlona.l and 
naisy prlmitivism - nolse and monotonous. A 
ieíi&it¡v¡ty cannot be builí on the basís of a 
rtord, every sort of constrjet on converges 
mío a boring lort or períedtoni, a ítag na nt 
idea cf a ge Id en swarnp, a relatlve h unnan 
Droduct. A work af art shouldn'tbe beauty 
per se. Uexause ¡t Is dead; neither gjay ñor 
sad, neither light nar dark; it is to rejoice or 
■na Ircjl individual iticí Lo Strvt? thern up Lhc 
r:a ke& af sa Inted li sises or the sweat o J a 
nneandering thase through the atmosphere. 
i worv of art is never i>eaut¡rui, by deaee. 
shjectiwely, Foreveryane. Criticism is, 
therelOrí h ussiess; R anly erists subjeítivíly, 
for every Individual, and witrkout Che 
slághtest general characteristic . Do peaple 
imagine they nave found trie psytüK basls 



J 



cómrnon tó all hurriamíty? Ttie attempt of 
«lis, and the Blble. conceal., under tfvelr 
ampie, benevoient wings: shit, animáis and 
íays. How can anyone hope to order Che 
chaos that cons:itutes that infinite, formless 
.rafiatiOri; man?The principie; 'Líwethy 
ifrighbüür" is Hyp*cnsy. "Know tnyself" Is 
jtopian, but more acceptable because it 
nciudes mallct. No p¡ty. AHer th.e carniagewe 
iré left ivith the hope cf s purified human ity. I 
*lways speak almut mySelf because I don't 
warit to oonvlnce, and I have no rlght to drag 
jt'ie'E n my wake, l'm not campelling anyone 
:o foiiow me. becauíe ewerycne makes his art 
n his own way, if he knoivs- anything about 
:hé joy that risés like an arrow up to the astral 
strata . Oí ttiat wh ich descends Into the mines 
itewn with the flawers af corpses and fertile 
spasms, Staiactites: look everjíwheíe ror 
them, in creches magntfied by pai-i, eyes as 
irhite as andéis' ha res. Tnus DADA was twrn r _ . 
out af a meed ror l ndependente. out of 
Tiistrust for thve cpmmunity. People wha o h, 
usitíepllwir rreedoín. we tfo^taeceptany"-... 
:heoríes. We've had enaugh af the cubist and 
Futurist academies' laboratoriesof Fcumal 
deas. Do we mate art In onjer tr> earn money 
ind keep Dhe dearbourgeoisie happy? 
^hymes have the sufiack oT moiieY, and 
nflexiüfi s lides alorg the Une af the stomach 
n profile. Every group of artists has ended up 
*t th¡s bañé!, stradaiingvarlous comets. 
.s a 1 ,' n-¿ the doar open to the possi b¡ lity af 
rt'aiiowirva in comrortandrotHJ 

L916 AT THE CABARET VOLTAIRE, ZURICH 
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Con el marco vacío de la imagen seleccionado, Archivo > Importar > Obtener Ima- 
gen. Selecciona hand.png.jpg y presiona el botón aceptar. Con la nueva imagen 
seleccionada, haz clic con el botón derecho del ratón y selecciona Ajustar Marco a 
Imagen. Coloca la mano gráfica sobre las palabras como se muestra en la imagen 
siguiente. 
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sider it f utile, ar :J if we don t waste 
*&er a wórd that tioesn't mean 
..; The Tina tJwugfit that eo^es to 
n$ls is of a bacteriological order: at 
to diícov*r rts ■etYmoioQi'Cai. histoficaí 
'psyc ha (boica I meaning. We read Jn the 
papers thjt Che negrees nf the Kroa race cali 
the tail or^ sacred co*: dada, a cube, and a 
TiQther, i rt a certain región of Italy, are 
aliad: DflbA. The wertí rs* a horjby rms*, a 
:hildren's ^íurse, a dauble afflrmative in 
Russian arjd Remanían, is also: DADA. Some 
ieam-ed|üíimaiists see¡t as anartfor 
babies. ather 

lesuscaiiirfotneiftiiecMdi'enuntahirn saints 
;ee ¡tas ajreturn to an unemütional and 
naisy prin^tivism - noise and ma-natonous. A 
ieíl&itiYityicann'Cir &e built on the b&sb af a 
í'Síd ■Js.VJÉl'' s ort °f cors:rjct on converges 
íiíó aTSeílog sort of p*ff*clP0i>, a stag na nt 
idea cf a golden swamo, a relative h unnan 
Droduct. A wo r k af art shouldn'tbe beauty 
per se. hexause ¡t ls dead; neither gay ñor 
sad, neither light nar úark; it is to rejaice ar 
inaitííat individuantie? to serví thern up the 
r:a kes af sa inted h aloes or the sweat ü j a 
nneandering thase Ehrough the atmosphere. 
4 wonv ot art is never r>eaiit¡rui, by decree. 
sbfEctively, fareveryane. Criticism is, 
thefelOrí, usSleSs; it anly «iíts subjeítively, 
forevery Individual, and without the 
slightest general characteristic. Do pea-pie 
imagine they nave found the psjrehk basls 



J 



;ommcm to ali ln, m.j rí IV The a ítem pt •of 
esus, and the Blble. conceaL under threír 
ampie, benevalent wmgs: shit, animáis and 
aays. How can anyeme hope to arder the 
chaos that cor\s:itu:es that infinite, formless 
^ariation; man?The principie; 'Lovethy 
leighbüür" is hypocnsy. "Know thyself" Is 
utopian, but rrore acceptable beca jse it 
ndudes ma\\at. N& p¡ty. Arte* the camagt we 
iré left with the hope of a purihed human ity. I 
alwáys speak atróut. myself because I don't 
«ant to (onvlnce, and I have rvg rlght to drag 
?|-.e"E n —y wake, j'm not campelling .snyore 
:e (oiiow me. bec&use íveryone makes. nis art 
n his own way, if he knc-ivs anythirg abaut 
:hé joy that risés like an arrow up to the astral 
¡trata . oí that wh ich descendí Into the nunes 
;tewn with the flawers af conpses and fertile 
spasms, St&lectites- look ever-jíwheíe íor 
thern, in ere ches magntfied by pai-i, eyes as 
ntiite as- anejéis' ha res. Thus DADA was born r .. 
jut aía íieedíarlndependeníe. outflí 
Tiistnist for the cammunity. People wha o h, 
usVíeptlveir rríedcun. We tfoh't aeceprt any -,_, 
:heoríes. We've had enauoh af the cublst and 
: uturist academies' laboratoriesof fo*mal 
deas. Do we make art ¡n order tu eam money 
ind keep the dearbourgeoisie happy? 
^hymís have th* sunack oT moiieY. *nd 
nflexiün s lides alorvg the Une af the stamach 
n proflle. Every graup af artists has ended up 
at this hant, straddling ^arlous caroets. 
je av ng the otoor open to the possi b¡ lity af 
rt'aiicivrirva in torurort and load 

L*16 AT THE CABARET VOLTAJRE, ZUMCH 
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3. Cree una línea dinámica en la página cambiando la forma de ambas cajas usando 
el botón Editar Forma en el panel Forma de la ventana de Propiedades. 



Ejercicio 2: Usando opciones, tonalidad, y la saturación del marco de texto para crear 
contraste en la página dos 
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iflent ruine, ana >r we aorvt waste 
fejoyera word tnat doesn't mean 
Thé flrst Lhcugtit tliát comes Lo 
jnds is af * battertoleglcal tjnjer: at 
>zip s :■:■/£' i:s ety-io ogicai. histórica I 
psycáoioaieai meaning we f*ati m trie 
ers that the negraesof the trae race cali 
taNjOf a sacred cow: DADA. A cutre, arvd 
iQtñjer. in a certain reglan o* Itaíjr, are 
:alled:¡DADA. The word far a hobby norse, a 

llorona nuiic. a üflubie aTnriTkUJve ¡^ 
iRussja^i arvd Romanian, ¡s also: DADA, Sume 
learnejd joumalists see ¡t as a n art for 

~" otHeí 
lesustallingthelittlechiidi'eruhtohim saints 
e* l( as a íeíurn to am uriernoti[>n«l and 

lis^primitiYism- noise and münotündus. A 

isensjtivity canntrt be bullt on Une basis of a 

\wcnti; etfery SOrt &f C&nstnjctlori converges. 

jntga boring sort oF perfección, a stagnant 

M:-.! .'.:l : :|í>|.-:i;- y/t. ím\> á rcUilivc himj'i 

iroduct. A work oí an shüuldn't be beauby 

¡er se, beca use It ¡s dead; neithergay rvor 

fitWw üflU't n-or flark- it is, tu reiolíe or 
maltreat individuali ties ta serve them up the 
:....h.", :/ voi-.i;:.! ...i o< ; ..:■ I he swcal el •; 
lmeandenng chase thraugh theatmDsphece. 
work of art ¡5 never bea utiful, by de-cree, 
'bieetiwdy, rtx everyone . Crlílclsm i&. 
: he reto re, useless; ¡t onlyexists 
|Subj#rt¡vely-, fot evefy individual, arwi 
Itrtout the slKjhtest general charactanstlc. 

people imagir>e they have found the 
sychie oasis common te all numanlty? The 



jli ::rr|)' uf |tb Ji. jn<; llu BíIJI'l\ ¡.íintcíií. 
1 indertheir ampie, henevglent wlngs: shit, 
animáis and days. How ca n anyone hape to 
' ¡Mar the cnaos that constltules that infinite, 
.formless vanation. man? The principie: "Lave 
:hy neighbour" ¡i hypoerisy. "KrWw thySélF" is 
'M|i hi\ r.n: niíiiv- ; : i:rf[' : l,in ?■ h r-i- a\. ?.-?■ it 
¡ncludes malice. Nd pity. Arcer the camage we 
[are lert w>tn the hope oí a curified humanlity, i 
always soeak abnut myself beca use I don't 

'Snt tó convince, Sr>d I have rw right ta drag 
lOtüers In my wake-, S'm not cümpelllng 
nyone to- follow me, because everyone 
makes his art in his own way. ¡T he kni>ws 
lanythingabdut the jcy that risesllhean 
' iitow up to ttié astral strata r br thát whicíi 
lescends Into the mlrves sbewn wlth Ehe 
fiowers dí corpses and fertile spasms. 
' ¿talaetites; look everywhere ror therr^. in 
creches magnified by pain, eyes as white as . 
langéls' bares. Thus DADA rrás bofn, out. gfjá'jj 
1 ieeü for independenife, <iut of mlst^jflrt 
:he íommun ty. Peop e wf.o ¡din us k'ead tne.r-' 
ifr-eedom We úom't iKtpt any theír¡H-'-' r ' 
\yts've had enougb of the cubist andfuturist 
|Bcadem¡es: laboratories of formal ideas. Do 
■emake art morder toearn nuaney *nd teep 
he dear bourgeoí se h appy 5 P.hymes have 
.hí- smítk ol Wirjy. ..irv} irTI<.'j¡yri iliiJéS 
Icng the lineofthe stemach in profile. Every 
group "f -".r l¡ sus fias ended up at this banfc. 
iStraidílling vnnous cometa. leaiJlng th« dísor 
lepen to the possibilicyof wallowing in 
' :omíí>rt arvd Knm. 
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4. Ajusta el tratamiento tipográfico pra la tercera instancia de la palabra "DADA" 
en la primera columna. Hazla más larga, negrita, itálica y establece el color a ro- 
sado_dada. Mira con detenimiento el espacio entre los caracteres. Puedes ajustar 
este espacio en el panel de Texto. 
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itider ¡t fútil e, and if we don't waste 
iejover a word that doesn't mean 

ngj... Trie first thought tbat comes to 
mlnds (S of a bacteriológica! order: al 
^t toíliscover its etyrna log lcat„ historlcal 
ír psychologkal meaning. We read in the 
'ipapers that the negroes of trie Kroo race cali 
lthe tailjof a sacred tow: DADA. A cube, and 
la rnothW, in a certain región of ftaly, are 
calledijDADA. The word for a hobby horse, a 
Ichlldrdn's nurse r a double arfiírmatlve In 
,Russ¡3n and Remanían, is also: 

DADA. 

Somd teained jioumalists seo it as. an art for 
ibabids, other 

lesuScalImgEheliittlectiildrenuntohim saints 
■ee k as a retum to an unemotiomal and 
.nioisjí prirnitivism - noise and rnonotofious, A 
: eriiltivíty cannot be bullt on the basis of a 
word; every sart of tonstruction converges 
Jíito a boring sort of perfectlon, a stagnarvt 
lidea of a golden swamp, a relativo human 
producL A work of art shouldn't be beauty 
,per se, because it is dead; neither gay ñor 
■adj neither I ig hit nar darte it is to rejoice or 
maltreat Individualices to serve them up 
,tlie calces of sainted haloes or the sweat of a 
mea nde rim g criase throucjh the atmosphere. 

work of art i never beautiful, by decree, 
objectively, foreveryone. Criticlsm ¡s, 
Itherefore, usele^s; Itonly existí 
■ubjectivelVj for -every individual, and 



Do peoole imagine chey h.ave tounc the 
isychic basis common to aül humanrtyrThe 
ittempt of Jesús, and the Bible. conceal. 
under their ampie, benevolent wings: shit, 
'animáis and days. How can anyone nape to 
■rder the chaos that constítutes tbat infinite, 
ifonriless variatlon: man? The principie; "Love 
:by neighbour" is hypocrisy. "Know thyself" is 
utopian, but more acceptable because it 
¡ti dudes matice. No pity. After the camage we 
.are left witb the hope of a punfied fiijmanity. I 
lalways speak about rnyself becajse I don't 
iwant to convince, and I fiave no rigfit to drag 
^others in my wake, l'm not competí in-g 
nyone to follow me, because everyone 
makes bis art in bis owíi way, if he knows 
nything about the joy that ñses lite an 
arrow up to the astral strata, ortliat wfrichi 
lescends into ttie mines stewn with the 
flowe.rs of corases and fertile spasms. 
|Stalactites: look everywhere for them, ffv£ 
jereches rnagnified by pain. eyes as ^í^S 
iangels' bares. Thus DADAwas born,'p\PoT 
fvmú for independence, outof misEnJ^t-feT' 
:be community, People who join us keep their 
■freedom. We don't accept any theories. 
'e've had enough of trie cubist and futurist 
cademies; laboratories of formal ideas, Do 
■e make art i¡n order to earn rnoney and keep 
,tbe dear bourgeoisle bappy? Rhyrnes fiave 
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ó.Dibuja un rectángulo con la herramienta Insertar Forma en la parte superior de la 
palabra "DADA". Por omisión debería ser de color negro, pero puedes cambiar el 
color de la forma en el panal Colres de la ventana de Propiedades si es necesario. 
Haz clic con el botón derecho del ratón y colócalo bajo el texto. 
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7.Crea un corte en la caja (Control+Enter) luego de las palabras "We don't accept 
any theories." Crea una nueva caja de texto, y enlázala a la última caja. Seleccio- 
na el texto, abre el Editor Interno, y crea un nuevo estilo para esta caja llamado 
manifiesto_dada_7 . Haz el texto Bitstreams Vera Sans Regular 9/18, y establece 
el color a rosado_dada. Luego usa el botón Editar Forma en la caja de texto, para 
colocarlo en la dirección opuesta de la caja anterior para hacer la sección parecida 
a la imagen siguiente. 
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8.Corta la última línea "IN 1916 AT THE CABARET VOLTAIRE, ZURICH" y 
pégala en una nueva caja de texto. Coloca la caja de manera que el borde izquier- 
do cubra la palabar "inflexión" luego de "and" en la copia rosada. Carga rosa- 
do_dada en el fondo de la caja de texto y centra la tipografía verticalmente usando 
la Distancia en la sección de Texto de la ventana de Propiedades. Selecciona la 
tipografía y hazla negrita de color blanco. 
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9. Crea una nueva y última caja de texto. Escribe "How can anyone hope to order 
the chaos that constitutes that infinite, formless variation: man?". Selecciona la 
tipografía y cambia su formato a Bitstreams Vera Sans Negrita Itálica 64/74.8. Es- 
tablece el color de texto en rosado_dada con una opacidad del 60%. Coloca la caja 
de texto en la parte superior de la página dos. Colócalo bajo los otros elementos 
haicnedo clic con el botón derecho del ratón seleccionando Nivel > Bajar al fondo. 
Finalmente , tu página debería verse como la imagen siguiente . 
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Hola Mundo 

Cada página web es código hecho visual por el navegador de Internet. Abre 
cualquier página en un navegador de Internet y utiliza el menú Ver (Ver > Código 
fuente de la página) para ver el código fuente usado para crear esa página. Este có- 
digo le dice al navegador como mostrar el diseño, imágenes, enlaces y cómo será 
la interactividad de la página. Mientras que en las aplicaciones anteriores hemos 
hecho clic y arrastrado el ratón para crear un buen diseño, con las páginas web el 
proceso es diferente. Diseñaremos los elementos de la interfaz y luego escribi- 
remos el código que describe cómo queremos que se vea nuestra interfaz en un 
navegador de Internet. 

Mientras que las páginas web son normalmente programadas para esconder la pre- 
sencia del código en una fachada gráfica, artistas experimentales a menudo mues- 
tran parte de este código y lo exponen. El grupo de artistas Jodi (Joan Heemskerk 
y Dirk Paesmans) trabajan de manera extensiva con la materialidad del código. A 
principios de la explosión del fenómeno punto-com, cuando las coporaciones em- 
pezaron a apostar por la combinación de la estética con nía funcionalidad en línea 
(1995, 1996), Jodi creo una serie de páginas polémicas. Ellos reaccionaron ante el 
intento de las corporaciones de hacer de la estética de los medios en línea algo pro- 
fesional y ocultar la presencia del código. El sitio wwwwwwwww.jodi.org se ve 
como texto desorganizado en el navegador, y al ver el código fuente de la página, 
un diagrama de una bomba nuclear hecho con el código es revelado. 

Nota: Código es lenguaje. Puede ser pensado como un material que oculta su 
propia materialidad. 

Jodi.org invirtió el orden del medio. Donde los elementos del diseño son organiza- 
dos para crear mensajes visuales en el navegador, Jodi aparece al azar y frenético. 
En el código fuente Jodi revela el mensaje del trabajo en una simple ilustración, 
lanzando una bomba hacia el diseño limpio. Las páginas web se escriben Hyper- 
text Markup Language (HTML, Lenguaje de Marcas de Hipertexto en español), el 
cual ignora caracteres "espacios en blanco" que estén de más, característica que 
Jodi aprovechó para hacer un genial argumento visual y coneptual para romper las 
reglas del diseño de páginas web. 
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wwwwwwwww.jodi.org, Jodi (Joan Heemskerk y Dirk Paesmans), 1995, página 
web y código fuente del HTML, usado con el permiso de los artistas. 

En los años del World Wide Web (la web), el ancho de banda era limitado, de 
manera que parte de la comunicación fue hecha a través de servidores que traba- 
jaban solo con texto, salas de chat, calabozos multiusuario (multi-user dungeons 
o MUDs), y servidores de boletines de anuncios (BBSs). Las páginas web fueron 
diseñados con pocas imágenes porque tomaba mucho tiempo cargar la información 
para mostrar las imágenes. Debido a estas limitaciones en el uso de imágenes en 
alta resolución, se crearon diversas maneras creativas de dibujar con el texto. 
Definido de manera informal, el arte ASCII es hecho arreglando los 128 glifos o 
caracteres que forman parte del American Standard Code for Information Inter- 
change (ASCII, Código Estadounidense Estándar para el Intercambio de Informa- 
ción), usualmente en la forma de dibujos figurativos. Las formas y densidades de 
los caracteres es tratado de manera que los elementos formales construyand una 
línea, forma o sombra. Por ejemplo, el retrato de Natalie Bookchin hecho por 
Heath Bunting en 1998, uno de los primeros artistas en la red, puede ser visto aqui: 
http://www.irational.org/heath/imaging_natalie/ 
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Retrato de Natalie Bookchin, http://www.irational.org/heath/imaging_natalie/ de 
HeathBunting, 1998. 
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Con la materialidad del código en mente, construiremos nuestra primera página 
web. 

Para este capítulo, haz una carpeta en tu escritorio o el disco duro y comprométete 
a guardar todo lo que hagas de este capítulo o relacionado a él en esa carpeta. No 
hagas sub-carpetas, ni más de una carpeta. Nuestra carpeta se llama capituloquin- 

ce. 

1 . Abre una aplicación de edición de texto como TextEdit, Text Wrangler, TextMa- 
te, Smultron o BBEdit. En PC, usa Notepad o Wordpad. En los ejemplos siguien- 
tes, usaremos el sistema operativo Ubuntu con la aplicación de edición de textos 
Gedit instalada, de manera que las capturas de pantalla mostraran las interfaces 

de Gedit y Ubuntu. El primer y más importante paso a seguir cuando se escribe 
HTML en cualquier aplicación de edición de texto es el asegurarse de que se esté 
trabjando en texto plano o sin formato. Afortunadamente Gedit trabaja con texto 
plano por defecto, de manera que los ejemplos siguientes no necesitarán configura- 
ción extra. 

2. Cierre cualquier documento abierto en Gedit y haz click en Archivo > Nuevo, 
para comenzara un nuevo documento. 

3 . Escribe las siguientes etiquetas de HTML para abrir y cerrar. 

244 Hola Mundo 



-'Liíjsij/iiíi/iiü i jj¡> íjijiiriiijijí> - íjüíiü r^ir^nr^i 



Archivo Editar Ver Buscar Herramientas Documentos Ayuda 



L6 O v 



Nuevo Abrir Guardar Imprimir,,. Deshacer F 



_j *Documento 1 no guardado ES 



<html> 
</html>j 



Ln 3, Col 8 



La etiqueta de la abertura le dice a navegador que estamos escribiendo en lenguaje 
HTML, y la misma etiqueta con un guión inclinado (/) le dice al navegador que 
deje de generar el HTML. Todas las etiquetas de HTML siguen la misma estructu- 
ra. Otros lenguajes entendidos por navegadores de internet utilizan reglas simila- 
res con algunas variantes. 

4. Coloca el cursor después de la etiqueta de abertura del HMTL. Presiona la 
tecla Enter y luego la tecla Tab. Al presionar la tecla Tab, se genera una estructura 
visible en el código que es más sencilla de leer. (Los fabuladores y otros espacios 
en blanco extras son ignorados por el navegador y no afectan la funcionalidad 
o disposición del código) . Luego agrega etiquetas de abertura y cierre para el 
cuerpo. Todo lo que se coloque dentro de las etiquetas del cuerpo ( y sólo eso) será 
mostrado en la página web cuando el navegador la muestre. 



"■LiutiJíijüniü I ui> yuiífilijiJíí - íjatiü f°1 1^11^1 


Archivo Editar Ver Buscar Herramientas Documentos Ayuda 


b e v H a *» 

Nuevo Abrir Guardar Imprimir,,. Deshacer F 


Q *Documento 1 no guardado £3 




<html> 

<body> 

</body> 
</html> 
1 




Ln 5, Col 1 INS 



5. Dentro de las etiquetas del cuerpo escribe: 
¡Hola Mundo! 
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Archivo Editar Ver Buscar Herramientas Documentos Ayuda 


L6 - v H « *» 

Nuevo Abrir Guardar Imprimir,,. Deshacer F 


|*j holamundo.html Q 




<html> 

«body> 

<p>¡Hola Mundo !</p> 

</body> 
</html> 
1 




Ln 6, Col 1 INS 



6. Guarda el archivo como holamundo.html. Asegúrate de agregar la extensión 
.html al final del nombre del archivo. Esta extensión es importante, ya que le dice 
al navegador que este archivo, es un archivo HTML. 











Nombre: 


holamundo.html 










Guardar en la carpeta: 


Lj capituloquince 








\> Buscar otras carpeta 


5 




Codificación de caractens 


s: Localización actual [UTF-8) | 














Qcancelar 




^Guardar 













Atención: Al guardar los archivos para el Internet, no utilices mayúsculas, espa- 
cios, los caracteres reservados. Utiliza solamente caracteres de la a-z, 1-9, -, y el 
_. Mantente alejado de los caracteres reservados como ()! + ©& = ?. 

7. Abre el navegador de internet, haz clic en Archivo > Abrir y busca el archivo ho- 
lamundo.html. Nosotros abrimos Firefox, hicimos clic en Archivo > Abrir Archi- 
vo... y luego navegamos en Escritorio > capituloquince > holamundo.html. Nota 
que el mensaje ¡Hola Mundo! es la única parte del código que es mostrado en el 
navegador, debido a que es el único código que está dentro de las etiquetas HTML 
del cuerpo. 
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r . 






iüih 


— r-. 


<»' 




1=1 1 


|_HJ|_íjj 


Archivo 


Editar Ver Historial Marcadores Herrar 


# * 










v 6 t© 


a 


fi 


V 




0^ 












gMost Visitedv ^Getting Started » 


¡Hola Mundo! 


Terminad 


3 

j 



En el navegador, elije Ver > Código Fuente de la Página, para ver todo el código.- 
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Archivo Editar Ver Ayuda 



■;lrtml;- 



</lrtnl> 



<body> 

<p>iHola Mundo !</p> 
</body> 



En el ejercicio 2 volveremos a este archivo en el navegador de Internet, así que 
déjalo abierto si vas a trabajar en ese ejercicio a continuación. 
Cuidado: Hacer doble clic en el archivo HTML en tu carpeta puede que no abra el 
archivo en el navegador de internet. Si quieres ver el archivo en el navegador de 
internet, asegúrate de abrir el navegador primero y luego seleccionar Archivo > 
Abrir Archivo, o arrastrar el archivo HTML hacia el navegador. 
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Ejercicio 2: Hola KompoZer 

En el ejercicio anterior, escribimos en código de ¡Hola Mundo! usando un progra- 
ma de edición de texto. Un editor de texto es la aplicación más básica que se nece- 
sita para escribir código, pero escribir a mano gran cantidad de código puede tomar 
mucho tiempo. Muchos artistas y diseñadores prefieren usar aplicaciones del que 
se conoce como "Lo que ves es lo que obtienes" (en inglés, WYSIWYG "What 
You See Is What You Get"), como el programa FLOSS KompoZer para desarrollar 
código. KompoZer escribe el código por ti, lo que hace generar un archvo HTML 
mucho más sencillo. 

En este ejercicio, modificaremos y reemplazarmos el archivo que acabamos de 
hacer, de manera que usaremos el comando Guardar en lugar de Guardar Como. 
Al final de este ejercicio deberías tener un sólo archivo en la carpeta. 

1 . Abre KompoZer desde el menú de Aplicaciones. En KompoZer selecciona Ar- 
chivo > Abrir y abre el archivo holamundo.html. Nosotros haremos clic en Archi- 
vo > Abrir, y luego Escritorio > capituloquince > holamundo.html. 



>...; 



sin iiiiilü - itüiupü^ar 



B@® 



Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



Nuevo Abrir Deshacer Rehacer Enlace interno Enlace Imagen Tabla Formulario 



Texto del cuerpo 











= =§ » 



Anchura variable [v] 



B / U 



' Administrador de sitios 



Ven Todos los archivos [v] 
ÉP tS sí 8 O 



Nombre 



B Mi Sitio 
ffl Otro Sitio 



J¿] 



(sin título) 



8 



c 




Normal Etiquetas HTMI_|E3 Código fuente | l -.. Vista prel 



<body> 



2. Haz clic en la pestaña Código Fuente en la parte de abajo de la pantalla, luego 
haz clic en el botón de Vista Preliminar. La Vista Preliminar muestra el resultado 
del código y cómo sera mostrado en un navegador, y Código Fuente muestra el có- 
digo en si. Otra manera de ver Esto es que Fuente son las reglas para el navegador 
y la vista previa es lo que el navegador va a mostrar al seguir estas instrucciones. 
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Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



2 „ a H 9 



Abrir Guardar Publicar Navegar 



Deshacer Rehacer 



1 - 



Enlace interno Enlace Imagen Tabla Formulario 



Párrafo 











= =§ » 



Anchura variable [«] 



B I U 



-//U3C//DTB HTM. 4.01//EN" "http : //wuu 



" Administrador de sitios 



Ver: Todos los archivos 







tS S rf S ü 



Nombre 



B Mi Sitio 
ffl Otro Sitio 



IE 



1. <!OOCTYPE html PUBLIC 

2. <html> 

3. <head> 

4. «aneta content="text/html; cha rset=IS0- 8859-1" 

5. http-equiv="content-type"> 

6 . <titlex/title> 

7 . </head> 
S. <body> 

9. <p>¡Hola Mundo !</p> 

10. </body> 

11. </html> 



<l '" I 

[ Normal | @ Etiquetas HTMl| [Tg código fuente | c \ Vista preliminar [ 



> 



3. Haz clic en la pestaña del Código Fuente. Sólo el código será mostrado. Nota 
que los comandos de HTML son mostrados en color; las etiquetas son mostradas 
en color morado y el texto en negro. 

4. Haz clic en Vista Preliminar (o puedes probar también la vista Normal, la cual es 
la vista que generalmente se usa para crear HTML). Ahora podemos ver el resul- 
tado de nuestro código, o lo que será mostrado en el navegador cuando subas el 
archivo a Internet. 

5. En la vista Normal o Preliminar, coloca tu cursor al final de "¡Hola Mundo!", 
presiona la tecla Return y escribe "Esta es mi primera página HTML". Guarda 
el documento usando Archivo > Guardar. Cambiate a 1 a Vista Prelimiar y nota 
como KompoZer ha cambiado el código por ti. Una nueva línea (con una etiqueta 
de párrafo <p>) ha sido agregada al código para dar formato al nuevo párrafo que 
creamos al presionar la tecla Return en la vista Normal o Preliminar. 

Nota: KompoZer es redactor "Lo que ves es lo que obtienes" porque puedes 
cambiar el código usando los menúes y botones de KompoZer en la vista Normal. 
Debería ser llamado "Lo que ves es lo que obtiene, en la mayoría de los casos". 
Las vistas Normal y Previa son un 95% acertadas. Cuando se diseña para la web, 
siempre revisa el archivo en un navegador de internet para confirmar que el código 
HTML es correcto. 
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hJ 


sin iíiulu - ituiupü^ar 


B@@ 


Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 


2 . ^ H 9 .3. 4? fi 1 3 „ 

Nuevo Abrir Guardar Publicar Navegar Deshacer F Enlace interno Enlace Imagen Tabla Formulario 




Párrafo 




T TT 


l.= := 


■í= 11 


1 1 9 Í3> «5, 




Anchura variable [v] 


W' 


A~ A" 


B / U 


t * a ■ 


* 


h (sin título) 


« 


- Administrador de sitios 




457px 


1 


Ve 


;n Todos los archivos [v] 


1 


¡Hola Mundo! 

Esta es mi primera página HTML| 


'É 


! já> S sd 8 © 


Nombre |s| 


+ Mi Sitio 


H Otro Sitio 




Normal Etiquetas HTMl|E3 Código fuente | 


-., Vista preliminar | 


<body> <p> 





',..; 



~út¡ iüulu - ilu/íipüjiar 



B@@ 



Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



/ „ t* H 



Abrir Guardar Publicar Navegar 



Deshacer Rehacer Enlace interno Enlace Imagen Tabla Formulario 



Párrafo 











n % 



|v] I ^ 



B / U 



• Administrador de sitios 



Ven Todos los archivos [v] 

m es e ieí ss © 



Nombre 



B 



Mi Sitio 
Otro Sitio 



1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTM. 4.01//EN" "http://wuu.\ 

2. <html> 

3. ehead> 

4. silleta content="teítt/html; cha rset=IS0- 8859-1" 

5. http-equiv="content-type"> 

6. <titlex/title> 

7. </head> 

8. <body> 

9. <p>¡Kola Mundo !</p> 

10. <p>Esta es mi primera página HTML</p> 

11. </body> 

12. </htnl> 



<| '" I 

| Normal | @ Etiquetas HTMl| r¿7] código fuente | '-*. vís ta preliminar| 



> 



La etiqueta del párrafo se abre y se cierra alrededor de la nueva línea de texto. 
Este es un ejemplo de jerarquización. La jerarquización es cuando un sistema de 
etiquetas abiertas y cerradas se coloca dentro de otra etiqueta abierta y cerrada. La 
relación entre donde cada grupo de etiquetas se abre y se cierra es importante. Un 
sistema de etiquetas se estructura alrededor del otro de modo que nunca se super- 
pongan. 
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Hola Mundo 



INCORRECTO 



< H > < W > <l H > ¡Hola Mundo! < 



A > </• 



:/W ></ 



CORRECTO 



> < 



> < 



> ¡ Hola Mundo !</ > </ W > </ 



6. Vuelve al navegador donde viste el archivo holamundo.html en el Ejercicio 1. 
Recarga la página en el navegador (Command+R en la mayoría de los navega- 
dores) y observa los cambios que hemos hecho en KompoZer. Si el archivo fue 
cerrado, usa Archivo > Abrir y selecciona el archivo holamundo.html. En este 
ejercicio modificamos el archivo holamundo.html. No salvamos unnuevo archivo, 
pero reemplazamos uno existente. El navegador muestra los cambios en el archivo 
cuando los cambios han sido hechos en el archivo original (Archivo > Guardar) en 
KompoZer y la página ha sido recargada en el navegador. 



Hola Mundo - Mozilla Firefox 



m _m 



Archivo Editar Ver Historial Marcadores Herramientas Ayud 



& v £ 



(D file:///hon 


V 



G 


V 


Gooi^ 



gjMost Visitedv ^Getting Started ^Latest Headlinesv 



¡Hola Mundo! 



Esta es mi primera página HTML 



Terminado 



7. Vuelve a KompoZer y escribe un nuevo párrafo en la visión normal: "Hola el 
mundo es el primer ejercicio que aprendes en cualquier lenguaje de programa- 
ción." Guarda el archivo y refresca el navegador de internet para que veas el nuevo 
texto en la página web. 
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Archivo Editar Ver Historial Marcadores Herramientas Ayuda 



- t -■ 1& 



file:///home/jennifer/Escr 



Qv 


Google 'Q, 



jMost Visitedv ^Getting Started Ü^Latest Headlinesv 



¡Hola Mundo! 

Esta es mi primera página HTML 



¡Hola Mundo es el primer ejercicio que aprendes en cualquier 
lenguaje de programación! 



Terminado 



Ejercicio 3: Enlaces Hipertexto 

Los enlaces hipertexto, links como se les conoce comúnmente, son rutas de un clic 
de un archivo HTML a otro. Los enlaces son el nivel más simple de interactividad 
en la web. 

1 .Abre una nueva ventana o pestaña de navegación en el navegador de internet y 
busca por la frase "Helio World! Collection" (Colección ¡Hola Mundo!) Haz clic 
en en la página web o haz clic en este enlace http://www.roesler-ac.de/wolfram/ 
hello.htm. 

Esta colección de ejemplos de Helio World! comenzaron en 1994, aunque "Helio 
World" apareció por primera vez en un libro de programación en 1978. Copia la 
dirección de este sitio de la barra de direcciones del navegador y vuelve al archivo 
que modificamos en el ejercicio 2 en KompoZer. 

2. En la visión Normal, selecciona el texto "primer ejercicio que aprendes en cual- 
quier lenguaje de programación" resaltándolo con el ratón. Si no está activo, haz 
clic en el botón Enlace en el centro de la barra de herramientas. Pega la dirección 
que acabas de copiar en el espacio etiquetado como Ubicación de Enlace. 
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<J Aplicaciones Lugares Sistema ^Q Q 




«Iti 


t 13 de abn 1B:51 


ennifarE 


■#* 


i L ; Hola Mundo [file 
Archivo Editar Ver Insertar Formato Tabla Herramientas Ayuda 


r J .../holamund02.html] 


KompoZer 






EBB 


A, - ™, SL SL ^ «jfc™ JL 


■ "I '3 

Imagen TaBl.a Formulario 


• JL 






© 


Pimío |(s¡nd«s<!l g | I II IE := 8 


I | 5 1 








* » % 



a' A' B í U 



" Ad mi ni si 

Ver: I Todos 



Nombre 



WüpteclijiJbs daJ a 



Texto del enlace 

ejercicio que aprendes en cualquier lenguaje de... 

Ubicación del enlace 

Introduzca una dirección web, un archivo local, una dirección de correo 

electrónico o seleccione un enlace interno o una cabecera de la lista 

desplega ble: 



c.de/wolf ramyhello.htm. 



JH Bí 



i en cualquier lenguaje de programación! 



□ lo anteriores una dirección de corneo electróni 
D La URL es relativa a la dirección de la página 



Destino 
D El enlac 



Edición avanzad; 



cancelar | | Aceptar 



Normal | EleO Etiquetas html|E3 Código fuente | vista preliminar 



M £ DigitalFoundationsle.. >-_j Hola Mundo [ule y...;h.. || < Hola Mundo - Mozílla F... K g~] 

3 . Presiona la tecla Return y Esto cambiará el texto seleccionado de cuerpo (body) 
a enlace (hyperlink). Esto es importante: guarda el archivo. Si es archivo no es 
guardado, el trabajo actualizado no será cargado en el navegador. 

4. Ve al navegador y recarga la página de holamundo.html. El enlace debe funcio- 
nar en el navegador. Vuelve a KompoZer y revisa el código que fue creado. 

En el código, la letra "a" representa el ancla y la secuencia "href ' le dice al nave- 
gador que esto es una referencia del hipertexto, mientras que el URL (dirección de 
la página web) rodeado por comillas, es el valor que dice el navegador hacia donde 
el hipetexto hace referencia. La etiqueta del ancla se puede leer como "cercano" 
o . Note que la etiqueta comienza momentos antes de la palabra "" y se cierra 
enseguida después del período en el final de la oración. Esta parte de la oración se 
convierte en el enlace. 



b / u 



4. «meta content-"text/ht«nl; charset=ISO-8859-l" 

5. http-equiu="content-type"> 
5. <:title>Hola Mundoe/title* 
7. </head> 

a. «:bod/> 

9. ¡Hola Hundo!<br> 

18. <br> 

11. Esta es mi primera página HTHL«:br> 

12. <br> 

13. <p> i Hola Mundo- es el prim er 

14. <a riref=" - http7/WhW.ro.esler-ac.de r /wolf ram/hello..htni.">ejerci 

15. que aprendes en cualquier lenguaje de programación !*7a><7p> 

16. </body> 

17. </html> 



Normal 1 Etiquetas HTM L | [j>] código fuente | '-•■. Vista preliminar | 
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5. Mueve la etiqueta de anclaje (a) cerrada justo antes de la palabra "en cualquier". 
Cuando la página web es vista en un navegador, el enlace será más corto para in- 
cluir sólo el texto que se encuentra entre la etiqueta de abrir y la de cerrar. 



tflB I U|E I 3 F 

í - ■ c. 7_T— ~. ~ 

2. <html> 

3. <heMl> 

4. <meta content- -- text/html; cha rset=ISÜ- 8859-1" 

5. http-equiv="content-type"> 

6. <title>rtcla Mjndo</titl.e> 

7. </heaá> 
, <body> 

9. ¡Hola Mundo!<:br> 

10. <br> 

11. Esta es mí primera pagina HTML<br> 

12. <br> 

13. <p> ¡Hola Mundo es el primer 

14. <a href="http://ww. roesler-acde/wolf ram/hello. htm. ">ejerc icio 

15. que aprendes</a>en cualquier lenguaje de progranación!-<:/p> 

16. </body> 

17. </html> 



| Normal | Etiquetas HTML | código fuente | '-. Vista preliminar | 



Ejercicio 4: Imágenes 



Para agregar una imagen a una página HTML, necesitas tener preparada una ima- 
gen para ser viste en línea. Para este ejercicio, buscaremos una imagen en Flickr. 
Flickr una página web para compartir imágenes donde las personas pueden buscar 
imágenes por etiquetas. En este ejercicio usaremos una imagen que ha sido colo- 
cada en el dominio público con una licencia Creative Commons. 

1 . Ve a Flickr.com. Si no has iniciado sesión, el área de búsqueda está centrada 
verticalmente en la mitad derecha de la página. Si has iniciado sesión, usa el área 
de búsqueda en la esquina superior izquierda. Busca la palabra "Hola Mundo." 

2. Haz clic en el botón "Búsqueda Avanzada" en la página de resultados. 

£ I |^*ly ■* No has ¡n ¡codo sesión ínter sesión Ayuda 

Inicia La visita Crear cuenta Explorar; ■* Buscar 



Buscar 



Fotos Grupos Persona 



Bi.ir..:|i.i~.:l-i > . . ni • i :t i 
Buscar por cámara 



1 Textocompbto ^J Sólo etiquetas 
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3. Navega hacia la parte de abajo de la página y activa la caja al lado de "Buscar 
sólo dentro de contenido con licencias de Creative Commons" Creative Com- 
mons es un esquema de licencia que presenta una alternativa a las leyes estándar 
de derecho de autor de los Estados Unidos. Todas las fotografías que son cargadas 
a Flickr, obtienen derechos de autor de manera automática, previniendo que otras 
personas las usen para crear trabajos a partir de ellas. Creative Commons perimite 
que publiques tu trabajo en línea, dándole una licencia abierta que permite a otros 
usar tu trabajo en el de ellos. La cultura en línea es una cultura basada en com- 
partir, mezclar y colaborar. Las licencias Creative Commons permiten y otorgan 
poderes a esta cultura. Para una información más detallada sobre las leyes de 
derecho de autor, uso justo y licencias alternativas con Creative Commons, ve al 
Capítulo 2. 



Archivo 


Editar Ver Historial Marcadores Herramienta 






















& 


v tS | ** http://»uww.fl ictr.com/se a 


ch/advanced/?q=Hola Mundo 




\>r\ |Qv|Googla 


H.| 


■ -Most 


/isited^ ^Getting Started IsÉJLatest Headlines 1 *- 












flickr 

Inicio La visita Cr«a 


r cuenta Explorar 


No ha™ 


to3Psbn lnki.il =--=--:- *=■■ ■ Ayuda 


_ 




1 


Buscar 




Búsqueda ava 

Sugerencia: Utiliza oslas 

palabras o etiquetas de :_" 
búsqueda. Pot epnjplo. Cusca 


izada 










■ Tsxbconipb 








Ninguna de estas palabras: 
















Buscar por tipo de 

contenido 

Síigereoci». Marca tas casias 

'."é.'^irer con :üs búsquedas. 

Buscar por tipo de 

Sugerencia: Aplica un fitlro 
para incslraf sób fotos o 


SI Folos y Videos 

□ Capturas de pantalla.' Grabaciones de pantalla 

□ Ilustración/Arte ¿Animación/CGI 








'■!'' Fotosyvideos 
SólototoE 
Sólo videos 

□ SálovideosHD 






Termina 














4. Haz clic en una imagen que consigas en Flickr bajo las palabras "Hola Mundo" 
con licencia Creative Commons. Ahora la imagen aparece en la página del autor 
que cargó el archivo a Flickr. 
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flickr 



Inicio La visita Crear cuenta Explorar 



No has inicacb sesión ínter sesión Ayuda 
Buscar 



Buscar 



Grupos Personas 



9 Texto completo LJ Sob etiquetas 

%é Encontrarnos 139 resultados que coincidan con Hola y Mundo, licenciado como Creative Commons 

Ver: Más relevantes* Mas recentes ■ Más interesantes Mostrar: Detalles* Minaturas 

Hola mundo: desde Word, 
office, Windows, 
virtual box, fedora 10 

de juque 

(^] 12 comentarios 

Con la etiqueta screenshot, fedora, captura, 

compiz ... 

Cargada el 3 de abril, 2009 




Z 

perfil. 



Ve más de las fotos de juque, o visita su 



E : ir.-:ii.i¿":h -iv :ui:>.b 
Buscar por cámara 



5. Haz Control-Clic o clic con el botón derecho del ratón en la imagen y selecciona 
Copiar la ruta de la imagen. Esto copia la dirección URL de esa imagen. El URL 
es el camino a la localizacion donde el archivo de la imagen está guardado en el 
servidor. La próxima vez que uses Editar > Copiar en cualquier campo de texto, 
esta dirección será pegada. Usaremos Esto en KompoZer. 



flickr 



Inicio La visita Crear cuenta Explorar 



No has ¡nejado sesión Inicar sesión Ayuda 
Buscar 



Hola mundo: desde Word, office, Windows, 
virtualbox, fedora 10 



Cargado e I 3 de abril, 3309 
por juque 




6. Vuelva a KompoZer y ve el archivo holamundo.html en la vista de Código 
Fuente. Escribe una nueva etiqueta de párrafo. Observa que KompoZer cierra au- 
tomáticamente la etiqueta. Ahora agregue una etiqueta como esta <img src="url" 
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Hola Mundo 



/>. Reemplaza las letras "url" con el URL que copiaste de Flickr.com pegándolo en 
esa área. Deja las comillas en la etiqueta, y el espacio antes de />. 



a t Al B / U 



<<DOCjyPE httitl PUBLIC "-//W3C//DTB HTML 4.VI//EN" "t\ttp://YNW.w3.crg/TR/htv\l4/strict.(¡td"> 
■ehtml> 
<head> 
<neta content="text/htinl; charset=I50-a859-l" 
http-equiv="content-type":» 
<titl&>Hnla Mundo«:/title> 
</head> 
cbody> 
¡Hola Mundo!<br> 



<p> i Kola Mundo es el primar 

<a href="http://wn\j. roe5ler-ac.de/wolf ram/he-llo. htm. -- >ejercicio 

que aprendes</a>en cualquier lenguaje de progratnación!</p> 
«pxiíng 

s rc=" http://f a rm4 . static . f lichr . com/3561/34Q95766&3_ae7242ed34. jpg?v-0"x/p> 
í/bod/s- 
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Hola Mundo 

1 



¡Hola Mundo! 

Esta es mi primera página HTML 

¡Hola Mundo es el primer ejercicio que apréndes ela cualquier lenguaje de programación! 
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La etiqueta de la imagen se cierra. La combinación de espacio, de raya diagonal, y 
corchete al final de la etiqueta, es una etiqueta que cierra. 

7. Guarda el archivo y recarga la página en el navegador. La imagen aparece en la 
página, con un espacio entre el párrafo y el enlace que hicimos en el ejercicio 3. 



Ejercicio 5: Tipo del Formato 

Si has hechos documentos impresos de OpenOffice.org a una impresora láser, has 
usado un lenguaje de marca o etiquetas. La diferencia entre trabajar en Kompo- 
Zer e imprimir desde OpenOffice.org es que estás conciente que estás creando el 
lenguaje de marca o etiquetas en el código HTML. En esencia, el botón B es casi 
todos los procesadores de palabras (por ejemplo, Microsoft Word o OpenOffice. 
org) es un componente de la interfaz del usuario que marca el carácter seleccio- 
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nado, mostrándolo e imprimiéndolo en estilo negritas (bold). La impresora lee el 
archivo enviado por el programa y da formato a la tipografía. En KompoZer, tu 
usas la interfaz para agregar formato, y ves el códio que está siendo escrito para el 
navegador. Piensa en el navegador como si fuera una impresora (y la red como la 
página que vas a imprimir), de esta manera puedes entender de manera más senci- 
lla el lenguaje de marcas. Descubrirás que no es una analogía siempre perfecta, ya 
que la interacción del usuario varía de la página impresa a el navegador de Internet. 
El ambiente del medio siempre afecta a la audiencia. 

1 . La etiqueta hl transformará las palabras "¡Hola Mundo!" en un título. Inserta la 
etiqueta como se muestra. 

2. <html> 

3. <head> 

4. <meta content="text/htin"L; cha rset=IS0- 8859-1" 

5. http-equiv="content-type"> 

6. <title>Hola MundtK/title> 

7. </head> 

2. Dar formato al texto en KompoZer es como dar formato al texto en otro progra- 
ma de procesador de palabras. Los estilos negritas e itálicas se hacen con un clic, 
pero nota que cuando presionas el botón I o B, etiquetas son agregadas al HTML 
de manera que los estiilos aparezcan de manera correcta en el navegador. 

Haz clic en Vista Normal. Haz la palabra "primera" negrita seleccionándola y 
haciendo clic en el botón B de la barra de herramientas. KompoZer rodeará la 
palabra con una etiqueta de estilo negrita para que sea mostrada de esta manera en 
el navegador de Internet. 

3. Selecciona la palabra "cualquier" y haz clic en el botón I en la barra de herra- 
mientas. KompoZer usa una etiqueta para dar estilo itálico a la palabra. 

1. <!DOCTYP£ html PUBLIC " - //W3C//DTV HTML 4.01//EN" "http://uw.w3.org/TR/htnl4/5trict.otii' 1 > 

2. <htill> 

3. <head> 

4. <mata content-"t&xt/html; charset-ISO-8B59-l" 

5. http-equiv="[ontent-type"> 

6. <title>fEola Mundo</title> 

7. </head> 
S. <body> 

9. ^bigxbigxbigxbigxspari 

19. style="font-weight : bold;">¡Kola Mundo !</span»í/big></big;»</big><í/big><br> 

11. <br> 

12. Esta es mi <span style="font-weight : bold; ">primera</span> 

13. página HTML<:br> 

14. <br> 

13. <p> ¡Hola Hundo es el primer 

16. <a hraf«"http://wrf roesler-ac.de/wolf ram/ helio . htm.">ejercicio 

17. que aprendes</a>en <span style="font-style: italic;">cualquier</span> 

15. lenguaje de programación !</p> 

19. <p><jjng 

20. src="http://f a rm4.static. flickr.com/3561/34u95766S3 ae7242ed34. jpg?v=Q"x/p> 

; Hola Mundo! 




En esta imagen final, puedes ver el código usado para crear la página en el 
navegador. 
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Archivos y Servidores 



Un Web page es un archivo de HTML que se almacena en un servidor en la red. 
Un servidor es una computadora con el programa necesario para enviar y recibir lo 
que es pedido por las páginas web instalado. 

Un cliente es un programa en una computadora, como un navegador web que envía 
y recibe peticiones al servidor. Cuando haces clic en un enlace, tu computadora 
envía una petición al servidor a través del navegador de Internet y el servidor de- 
vuelve la página web pedida. 

Cada página web tiene una dirección única llamada URL (siglas para Universal 
Resource Locator que en español sería algo como localizador uniforme de re- 
curso). Un URL creado correctamente, tiene un nombre de dominio como por 
ejemplo www.digital-foundations.net. Los URL también pueden incluir nombres 
de archivos y carpetas. Las carpetas son denotadas con un guión diagonal antes 
del nombre, y los archivos HTML tienen al final la extensión .html. Por ejemplo, 
www.digital-foundations.net/folder/file.html es un URL apuntando a un archivo 
llamado file.html. Archivos y carpetas en un servidor son como carpetas en nuestra 
propia computadora. ¡La diferencia es que cualquiera en el Internet puede verlos! 
Una maera de pensar en URLs y servidores es a través la metáfora del servicio de 
correos postal. Una dirección postal especifica el lugar específico y el país. De 
igual manera, un URL es el lugar exacto donde se encuentra el archivo que estás 
pidiendo. El nombre de dominio es como la ciudad, estado, código postal y a 
veces la nación, la carpeta es como el nombre de la calle, y el nombre del archivo 
es el nombre de la persona. Todo esto debe estar incluido o el archivo correcto no 
podrá ser pedido. 

Los artistas experimentan con sus materiales, si son pintura, mármol, papel foto- 
gráfico, o, para artistas del Internet, la comunicación entre los clientes y servidores. 
En un intento por describir sus ilustraciones del Internet, MTAA (M. River & T. 
Whid Art Associates) creó el Diagrama Simple de Arte en la Red (1997). 

Simple Net Art Diagram 




The art happens here 



^^ 



MTAAca. 1997 
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http://www.mteww.com/nad.html 

El concepto del diagrama es que el arte en la red es sobre la comunicación. El arte 
no es sólo el código en el servidor, o los resultados estéticos del código cuando es 
mostrado en el navegador. El arte sucede a través de la comunicación. 

El artista Abe Linkoln tomó a trabajo de MTAA un paso más allá, con el Diagrama 
Complejo de Arte en la Red, localizado en: 
http ://www.linkoln .net/complex/ 

Para Linkoln, la red es un depósito de imágenes encontradas y de cantidades 
masivas de información. Nota la apropiación de la bomba del código de Jodi en 
este trabajo. Un servidor es apenas una computadora cargada con el programa que 
entrega los archivos pedidos por los navegadores de la red. El dúo de artistas Eva 
and Franco Mattes, quienes trabajan como 0100101110101101.org, crearon un 
proyecto llamado Life Sharing , donde convirtieron su propia computadora en un 
servidor web, exponiendo su toda su computadora y todo su contenido. 

Resultados de los ejercicios del capítulo 16 



Archivo Editar Ver Historial Marcadores Her 



tS 1 



j Most Visited v ^Getting Started 



Esta es mi primera página HTML 
Haz clic para ver la página nueva 



Terminado 



¿ útiü - Mustia Fltaíti,' r^~irü~IÍS3l 



Archivo Editar Ver Historial Marcadores Her 



<*¡ v 6 i ifi [iTfi 



gjjMost Visitedv ^Getting Started 
Esto no es el índice 
Haz cic para ir al índice 



Terminado 



Los ejercicios siguientes darán lugar a dos páginas web que se enlacen entre ellas 
donde unas es guardada en el directorio principal y el otro es guardado en un 
subdirectorio. 



Resultados de los ejercicios del capítulo 16 
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Ejercicio 1: Definición de un sitio 
en KompoZer 

1. Elija editar del menú principal cuando KompoZer se abre, luego selecciona 
Configuración de Publicación. 



>...; 



■sin iiíiilü - ¡tuiíip'j'Zar 



i 



Archivo 



Editar ! Ver insertar Formato Tabla Herramientas Ayuda 



Deshacer 
Rehacer 



Ctrl+Z 
Ctrl + Y 



4? B ^ 

Enlace interno Enlace Imagen Tabla Formularlo 



Texto 



Anchu 



- Admir 



Cortar 
Copiar 
Pegar 
Pegar sin formato 

Eliminar 



Ctri+X 
ctri+c 
ctri+v 

Supr. 







ÍJ r ¿5 



3 / U 



8 



457px 



Seleccionar todo 



Alt+A 



Ver: To 

lP Buscary reemplazar... Ctri+F 

Nombre Repetirla búscjueda F3 

Buscar anterior Mays+F3 



Revisar ortografía Ctri+K 



separar de la plantilla 



Configuración de publicación.. 



Normal | Etiquetas HTMI_| E3 Código fuente | '-, Vista preliminar | 



<body> 



2. Haz clic en nuevo sitio 







Sitios de publicación 



Seleccionar como valor predeterminado 



Eliminar sitio 



Configuración de publicación 
Nombre de sitio: I 
Información del sitio web — 



s 



Dirección HTTP de su página inicial (e.g.: 'http://www.mipsi.com/minombredeusuario'): 



Servidor de publicación 

Dirección de publicación (e.g.i 'ftp://ftp.lT1lipsi.com/mi^c^mb^edeusuario , ): 


1 Seleccionar directorio! 




Nombre de usuario: 




Contraseña: J D Guardar contraseña 





Ayuda 



Cancelar ' Aceptar 



3. Coloca el nombre de tu sitio y su URL. El nombre del sitio puede ser cualquie- 
ra, pero es mejor mantenerlo de manera sencilla. Si no tienes un URL, puedes 
dejar Este espacio en blanco. 

4. Coloca os detalles del Servidor de Publicación. Esta es la información "ftp" 
que usarás para transferir archivos de tu computadora al servidor. La información 
requerida incluye: 
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l.URLdelftp 

2. nombre de usuario 

3. contraseña 

El URL del ftp es generalmente el nombre del host (www.your-domain.com), pero 
ése no es siempre el caso. Tu nombre de usuario FTP y contraseña son necesarios 
también. Usualmente toda esta información la recibirás de la persona u organiza- 
ción que provee los servicios de hosting. 

5 . Haz clic en guardar contraseña (de otra manera cada vez que quieras transferir 
datos, tu contraseña será pedida). 

6. Haz clic en Aceptar. 

7. Para confirmar que los detalles funcionan, debes hacer doble clic en el nombre 
que le diste al sitio en el paso 3 de la interfaz principal de KompoZer. 



B@@] 



'...; 



3lu iüuJu - iíüHipuZar 



Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



2 „ m H 



4? y 



1 3 



Abrir Guardar Publicar Navegar Deshacer Rehacer Enlace interno Enlace Imagen Tabla Formulario 



Texto del cuerpo 



p] (sin clase) |v| 



'Q, í?, 



Anchura variable [vj 



A' A 



B / U 



' Administrador de sitios 



Ven Todos los archivos |v| 

IP ts e eí » q 



Nombre 



IE 



(Sin título) 



m 



C 



457px 
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<body> 



Si todo está bien, KompoZer hará una conexión al servidor, y el nombre del servi- 
dor en la ventana de KompoZer cambiará color. Si hay algunos archivos y carpetas 
ya en el servidor usted verá que exhibieron. 



Ejercicio 2: Manejo de Archivos y Carpeta 

1 . Ve el documento HTML en la visión normal. 
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2. Utiliza el Archivo > Guardar como, para guardar la página como index.html en 
un carpeta en tu computadora. Primero tendrás que colocar el título de la página. 



O 



Por favor, introduzca un título para la página actual. 

Esto indentifíca la página en el titulo de la ventana y en los marcadores. 



Cancelar 



Aceptar 



Luego escribirás el nombre del archivo y seleccionarás donde lo quieres guardar. 



tó 



Guardar página como 



H 



Buscaren: 



...apituloquince/misitio 






Q 



Nombre 



r Tamaño 



Ultima modificación 



Nombre del archivo: index.html 

Archivos de tipo: I Archivos HTML (*.html; *.htm; *.... 

ü Mostrar archivos y 
directorios ocultos 



Cancelar 



Guardar 



La carpeta que escogas se convertirá en el "directorio local" donde construirás tu 
sitio. Al final todo el directorio será transferido al servidor de manera que el con- 
tenido en el servidor sea el mismo que el de tu directorio local. Para hacer Este 
proceso más fácil, manten todos tus archivos web en una sola carpeta. De esta 
manera, sabrás cuales archivos transferirás al servidor. 

Nombra tu archivo index.html. Es escencial que tengas un archivo llamado index. 
html (o index.htm) enel directorio principal de tu página web. El HTML de la pá- 
gina principal (home)es llamado index, html porque el navegador cargará automá- 
ticamente index .html de cualquier directorio principal. Cualquier otra página que 
quieras mostrar en el navegador, tendrá que ser accesado por un hiperlink desde el 
index.html o desde otra página que vino de ella. 

3. Ahora crearemos una nueva página. Selecciona Nuevo > Página en nueva pes- 
taña de la barra de herramientas. 
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iJll alilü [il]a:/.../luüa J !.ijíiij]J - i'.'jii¡¡jiiZar 



B@@] 



Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



Nuevo 



EÉ ü 9 



N 



4? LUÍ 



1 3 



Publicar Navegar Deshacer Enlace Interno Enlace Imagen Tabla Formularlo 



Página en nueva pestaña 



Página en nueva ventana 



(sin clase) pj 



Crear una nueva página U 



íj r í> 



Más opciones.. 



' Administrador de sitios 



Ven Todos los archivos p] 
ÉP CÜ 6 rf » Q 



Nombre 



IE 



Mi sitio 



m 



C 



457px 




Normal | Etiquetas HTML | E3 Código fuente | '-, Vista preliminar 



<body> 



4. Escribe "esto no es el índice" en esta página en la vista normal 

titula - iíuinfjülíyr 



Bita 



Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



, ü H 9 s 



\yr 



a i 3 



Abrir Guardar Publicar Navegar Desnacer R Enlace Interno Enlace Imagen Tabla Formularlo 



Texto del cuerpo 



pj (sin clase) p| 



•Q, <$> 



Anchura variable p] 



A' A 



B / U I 



- Administrador de sitios 



Ven Todos los archivos p| 



Nombre 



i Mi sitio 



■ (sin título) 



« 



457px 




Normal @ Etiquetas HTMI_|E3 Código fuente | '-, Vista preliminar 



<body> 



5. Guarda la nueva página seleccionando Archivo > Guardar Como. Ya que esta 
nueva página no ha sido guardada anteriormente, tendrás que colocar un título. 
Nombre la página dos. html y presiona Aceptar. Luego verás la ventana de navega- 
dor de archivos. Antes de guardar el archivio usa el icono de la carpeta con el '+' 
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verde para crear un nuevo subdirectorio. Un subdirectorio es una carpeta dentro 
de tu carpeta principal. En un servidor, es un directorio dentro de tu directorio 
principal. 



'. ■ 'Jliulu da l=i fjütjlíj-i ÍK¡~I| 


f '"■] Por favor, introduzca un título para la página actual. 

Esto ¡ridentifíca la página en el título de la ventana y en los marcadores. 


Q ^ 




Cancelar Aceptar 





Escribe el nombre del subdirectorio que quieres crear. Nosotros llamamos el nues- 
tro subdirectorio 

Presiona Aceptar. El nuevo directorio será creado y automáticamente verás el 
contenido de Este directorio en el navegador de archivos. Ya que Este directorio 
está vacío, no hay contenido en él. Ahora guardaremos el nuevo archivo haciendo 
clic en Guardar. 

6. Vuelve al primer archivo index.html. Si aún está abierto, entonces está a un clic 
de distancia en una pestaña hacia la izquierda del área del documento. Si no es así, 
selecciona Archivo > Abrir. Crearemos un enlace de esta página a la página nueva. 
Escribe "Esta es mi primera página HTML" Luego presiona la tecla Enter y escribe 
"Haz clic para ver la página nueva". 













— |rp=-ir77n 


'... ; 




Iíjü=íj! íj]J=í:A^/Iíjü=íjLííiiíjJJ - iíimipoZar 






| <=¡ || la || 'ói, \ 


Archivo 


Editar 


Ver Insertar Formato Tabla Herramientas Ayuda 








Nuevo 


Abrir 


H @ Q & 

Publicar Navegar Deshacer C-. Enlace interno Enlace 


■ 

Imagen 


Tabla 


Formulario 



Texto del cuerpo 



[vj (sin clase) |v| 



1 1 9 ÍJÍJ 



Anchura varia 



bie y B" & 



Á" A 



B / U 



- Administrador de sitios 



Ven Todos los archivos pj 

ép es e ¿ » e 



Nombre 



index 



dos 



» 



457px 



Esta es mi primera página HTML 
Haz clic para ver la página mieva| 



Normal | E°l Etiquetas HTMl|E3 Código fuente | '-•. Vista preliminar | 



<body> 



Ahora resalta el texto "Haz clic para ver la página nueva" y haz clic en el botón de 
enlace en la barra de herramientas. En la ventana de Propiedades de Enlace, haz 
clic en el icono de la carpeta a la derecha de Ubicación de Enlace. 
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Wüplbdüdya üal =jul^jc=t 



[El] 



Texto del enlace 

Haz clic pana ver la página nueva 



Ubicación del enlace 

Introduzca una dirección web, un archivo local, una dirección de conreo 
electrónico o seleccione un enlace interno o una cabecera de la lista 
des plegable: 

II 

D Lo anterior es una dirección de correo electrónico 

D La URL es relativa a la dirección de la página 






Destino 

D El eníace se abrirá 


1 en una nueva ventana 


M 1 1 


» Más propiedades 



Edición avanzada... 



Ayuda 



Cancelar 



Aceptar 



Elije el archivo al que quieres hacer el enlace. En Este caso es dos.html. Como 
puedes ver, aparece en el navegador de archivos. Haz clic una vez en dos.html y 
presiona el botón Aceptar. 



hJ 



Abrir urtiújíi j-JTPJL 



Buscaren: 


...quince/misítío/subdirectorio p| 














Nombre 


v 


Tamaño 


Última modificación 


s 


dos.html 


240 13/04/09 15:40:39 



Nombre del archivo: 



Archivos de tipo: I Archivos HTML (*.html; *.htm; *.... v 



ü Mostrar archivos y 
directorios ocultos 



Cancelar 



Abrir 



En el área de Ubicación de Enlace, ahora se verá la ruta al archivo que acabas de 
seleccionar. Verás el directorio donde el archivo está guardado seguido por un 
guión diagonal y luego el nombre de tu archivo. En nuestra imagen la ruta es sub- 
directorioldos .html. 
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Propla-díidas dal ajilüea 



~ m 



Texto del enlace 

Haz clic para ver la página nueva 



Ubicación del enlace 

Introduzca una dirección web, un archivo local, una dirección de correo 
electrónico o seleccione un enlace interno o una cabecera de la lista 
des plegable: 

| subdirectorio/dos.html 

D Lo anteriores una dirección de correo electrónico 
D La URL es relativa a la dirección de la página 



Destino 

D El enlace se abrirá 


1 en una nueva ventana 


M 1 1 




» Más propiedades 



Edición avanzada.. 



Ayuda 



Cancelar 



Aceptar 



Presiona el botón Aceptar. El enlace será mostrado en la vista normal. 



'...; 



luda..: rflla:/.../li]üa J :.¡j¿ii]Jj - iíuííjpujíar 



LIJlMJ 



Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



2 , tÉ H 9 



Abrir Guardar Publicar Navegar 



<S fr 

Desbacer F 



4? - 

Enlace Interno Enlace Imagen Tabla Formularlo 



Texto del cuerpo 



[v] (sin clase) |v| 



íj r í, 



Anchura variable [vj 



B / U 



i índex 



- Administrador de sitios 



Sí 



Ven Todos los archivos [v] 

m tí a ¿ a o 



Nombre 



IE 



c 



Esta es mi primera página HTML 
Haz clic para ver la página nueva 



Normal Esl Etiquetas HTMl|E3 código fuente | '-, Vista preliminar | 



<body> <a> 



7. Repite las direcciones del paso anterior en la página dos. html para crear un 
enlace que vaya al index. Haz el link "Haz clic para ver el índice" en lugar de 

"Haz clic para ver la página nueva". Nota que el URL del nuevo enlace es / 

index.html. El sintaxis ../ le dice al navegador que se mueva al directorio principal 
para poder conseguir el archivo. En tu disco duro, esto significa mira dentro de la 
capeta anterior. 

8. Recuerda guardar todos los cambios hechos en KompoZer par poder ver los 
enlaces funcionando en el navegador. Puedes hace clic en cada página individual 
y usar Archivo > Guardar. Guarda todo y prueba tu trabajo en un navegador. Abre 
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index.html en el navegador. Usa Archivo > Abrir archivo o arrastra el archivo 
index.html a él área de página del navegador. Nota que al hacer clic entre dos 
páginas, él área de al dirección en la barra de navegación (donde escribes o lees el 
URL) muestra el nombre de cada archivo. 

9. Finalmente, transferiremos los archivos al servidor. Necesitamos transferir cada 
archivo de manera individual, y recrear la estructura de nuestro directorio. Primero 
transferiremos nuestro archivo index.html. Asegúrate de qeu la página esté abierta 
en la vista Normal y selecciona Archivo > Publicar como... 



VubU'-ur phíjhm 



Ü±j 



Publicar | Configuración 
















web" 




Nombre del sitio: 1 Mi Sitio 


^ Nuevo sitio 




"Mi página 


Título de la página: 1 uíicj 


] ej.: 


Nombre de archivo: | índex. html 


1 ej- 


"mípagína 


htmr 




Subdirectorio del sitio para esta página: 










1 














® Usarla misma dirección como página 










O Usar este subdirectorio del sitio: 










1 



Ayuda 



Asegúrate que el nombre del sito sea el mismo que el que creamos anteriormente. 
Ahora haz clic en publicar. Una ventana aparecerá mostrando el progreso. Cuando 
la transferencia termine necesitarmos chequear que haya sido exitosa. Para refres- 
car el servidor, haz doble cli en el nombre del sitio en el Administrador de Sitios a 
la derecha. KompoZer se conectará de nuevo al servidor y mostrará el contenido. 

Finalmente, repite Este proceso para la segunda página que creamos. Para hacer 
esto, deberás crear un subdirectorio con en nombre que le dimos a nuestro directo- 
rio local ("subdirectorio")- Haz clic en el icono en Manejador de Sitios que se ve 
como una carpeta con una estrella pequeña. Luego nombra el directorio y sigue 
el mismo proceso para transfeir el segundo archivo HTML. Necesitarás transfeir 
el segundo archivo al subidrectonio.a hacer esto usted primero tiene que crear un 
nuevo directorio con el mismo nombre que dimos a nuestro directorio local ("sub- 
directorio"). Chasque encendido el icono en el encargado de sitio que parece una 
carpeta con una pequeña estrella. Después nombre el directorio y siga el mismo 
proceso para transferir el segundo archivo de HTML. Usted necesitará transferir el 
segundo archivo al sub-directorio. 
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del contenido 

En los dos últimos capítulos anteriores, dejamos muchas decisiones estéticas por 
fuera de los ejercicios y nos enfocamos en las herramientas para construir código. 
Sin embargo, la estética no debe quedar por fuera de nuestra conversación. Así 
como una vez dijo el arquitecto americano Louis Sullvan (1856 - 1924) "la forma 
siempre sigue a la función". El uso de Sullivan de acero en lugar de albañería para 
crear estucturas de edificios, permitió que se separara de los elementos externos de 
la apariencia. Sulivan es conocido por resolver problemas que a los arquitectos se 
enfrentan cuando diseñan nuevos edificios, donde ya no estamos forzados por los 
límites técnicos de la albañeria pesada. Él adoptó los camibios que se dieron con la 
estructura de acero y creo una nueva manera de estilizar la apariencia exterior de 
un edificio. Su llamado a permitir que la forma se derive de la función ha influen- 
ciado profundamente el arte y el diseño. Al construir una página web, necesitamos 
mantener la estructura separada de la apariencia a través del uso de uno o más ho- 
jas de estilos. Cuando puedes hacer una página web que se vea de muchas mane- 
ras distintas, necesitas recordar la función del sitio. A pesar de que muchas páginas 
de arte experimental o conceptual tienen una función. En este capítulo, nos enfo- 
camos en relacionar la forma con la función: manteniendo un margen estructural 
del documento HTML separado del código que controla la estética. 

Hay varias razones de guardar el contenido y forma de una página web separado, 
incluyendo: 

1. Los usuarios exhiben el código en diversos navegadores. Cada navegador sigue 
diversas reglas de estilos. 

2. Existen estructuras estándar en la red que se basan en la separación del conteni- 
do y la forma para hacer el contenido de la red accesible a una mayor cantidad de 
usuarios. 

3. Una página web puede tomar un nuevo diseño, el diseño puede ser modificado a 
través de una hoja de estilos. 

4. Crea un flujo de trabajo eficiente, productivo. 

En los ejercicios siguientes, escribiremos un nuevo tipo de archivo llamado hoja 
de estilo en cascada (CSS, Cascading Style Sheet en inglés) para contener nuestra 
información de estilos. Este archivo estará atado a nuestro HTML page. Nuestra 
página HTML tendra'todo nuestro contenido con etiquetas estructurales y la página 
CSS contendrá toda la información relacionada con el estilo para cada una de las 
etiquetas. 
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Ejemplos visuales 

La frase "la forma sigue a la función" dicta que la apariencia visual de un objeto 
se deriva de su uso. A veces esta apariencia visual será altamente diseñada, y otras 
veces se verá como un HTML puro, como en el capítulo anterior. Cada función 
dicta su forma. 

A list Apart (Una lista aparte) 
http ://alistapart .com/about 

A List Apart Magazine "explora el diseño, el desarrollo, y el significado del con- 
tenido en la red, con un foco especial en estándares y mejores prácticas de red" 
A List Apart era uno de los primeros sitios en la red en abogar una estrategia de 
diseño exclusivamente CSS-céntrica. Esta página web es un recurso excelente para 
los diseñadores de la red y los arquitectos de información. 

Además de la abundancia de artículos, el sitio enseña con demostraciones. Está 
escrito en código HTML bien estructurado con una tipografía escrita en CSS fácild 
de navegar. 

Craigslist 

http://www.craigslist.com 

Note el contraste en jerarquías tipográficas del área de la búsqueda al contenido del 

cuerpo de la página, en los titulares y los enlaces. 

ComparaAListApart.com con Craigslist.com, un sitio web popular que facilita el 
intercambio de información entre personas buscando por compradores/vendedores/ 
comerciantes y cualquier relación posbile de mercancías, personales o intercambio. 
Cuando piensas en diseño en la red, Craiglist puede que no sea la primera página 
web en tu mente. Sin embargo, como un trabajo de diseño de información, es 
exitoso: la tipografía es fácil de leer y es fácil de navegar. La jerarquía entre varias 
tipografías es intuitivo. 



Ejercicio 1: Aplicando un estilo 

Hemos modificado las propiedades de la página HTML y hemos colocado enlaces 
e imágenes en la página usando KompoZer. 

Hasta ahora, estos elementos de las páginas han seguido los patrones por defec- 
to de fuente tipográfica, color y tamaño. Usando CSS podemos controlar estos 
y otras caracteríasticas de diseño. Separaremos el contenido de la página de las 
propiedades de estilos, que serán guardados en un archivo CSS. 

Nota: Recuerda, ciertas opciones de estética son limitadas a la red. Por ejemplo, 
para que una página web sea cargada con una fuente tipográfica en específico, las 
fuente tipográfica deberá estar instalada en la computadora del usuario. Si la fuen- 
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te no está, el navegador cargará una fuente diferente. De manera que la mayoría de 
las páginas web son diseñadas usando un "sistema" de fuentes tipográficas (aque- 
llas instaladas en la computadora cuando se compra), incluyendo Helvética, Arial, 
Times, Georgia, Verdana, Courier, and Geneva. 

1 . Abre KompoZer y crea una nueva página seleccionando Archivo > Nuevo, haz 
clic en el botón redondo para hacer un nuevo documento vacío y haz clic en Crear. 



Cíüísr un íjlíüju dücurributu u *>Juni]JI¿j 



Lgjl 



r ¿Que tipo de archivo quiere crear? 


O :Un documento vacío 


D crear un documento XHTML H Strict DTD 

Un nuevo documento basado en una plantilla 
Introduzca la dirección web (URL] de la plantilla 


o escoj 


a una 


plantilla 1 


xal 


1 








H 


Una plantilla vacia 











Crear en: Nueva pestaña Q 



Cancelar 



2. Antes de agregar contenido al archivo HTML, selecciona Archivo > Guardar 
Como. El programa te pedirá un título para la página y luego guarda el archivo 
como index .html en una carpeta que usarás para esta capítulo. Nosotros guarda- 
mos nuestro archivo en una carpeta en el Escritorio llamada capitulo 17 . 

3. Agrega algo de texto en la pagina. Nosotros escribimos "¡Hola Mundo!". 

4. Evalúa el código del archivo HTML. Puedes hacer esto en la vista Código o 
puedes abrir el HTML guardado en un navegador de internet y usar el menú Ver 
para ver el código fuente. Hasta ahora el código solo tiene código HTML. 

5. Usaremos en CSS para definir el estilo de las fuentes tipográficas y el cuerpo del 
texto. Haz clic en el botón Cascades (CSS) que parece una paleta de colres en la 
barra de herramientas. 



Hajia il» naillu C£S 



Ul 



€5 T tí) tí 8 « 


j Genera' | e-o:- 1 ■■: ■ ;■:■ | ■-■ ■■■-, \ •:** | _¡stas | Aural 




Hojas y reglas 


Nueva regla de estilo 




í hoja de estilos Interna 


estilo aplicado a todos los elementos de tipo 




p.e. h2 




■ \ ■ estilo aplicado a todos los elementos de la clase 






Crear un nuevo: 

estilo aplicado a un elemento con el atributo ID especificado 






p.e. #header 






■. ■ regla de estilo personalizada 






p.e. div#rieadera:hover 

li 






Crear regla de estilo. 







Para fijar el estilo para el texto de cuerpo elije "Body (texto de cuerpo)" del menú 
desplegable. 
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i-tojas da aaiito o 33 



:-: 



d^t S3 t * [ General |~Texto | Fondo | Borde:. 1 '.:¿ ,i |~^77~| a r. : . | 



:' hoja de estilos inte-ma 



Nueva regla de estilo 

* estilo aplicado a todos los elementos de tipo 

p.e. h2 
■ | ■ estilo aplicado a todos os e'emenms de la clase 
p.e. .myclass 

estilo aplicado a un elemento con el atributo ID especificado 
p.e. #header 

regla de estilo personalizada 
p.e. div#íieadera:hc-ver 



Crear un nuevo: 



bodj| 

| body (Texto del cuerpo) 



p (Párrafo) 

hl (Título 1) 

¡12 (Título 2) 

¡13 (Título 3) 

h4 (Título 4) 

h5 (Título 5) 

hC- (Título 6) 

address (Dirección) 

pre (Preformato) 



Luego haz clic en Crear Regla de Estilo. En la parte izquierda de la ventan, nota 
las palabras "hoja de estilos interna" con una línea punteada conectada a la pala- 
bra body. Esto significa que estás a punto de definir el estilo del cuerpo que será 
aplicado a través de CSS incrustado en la página web. Podemos aplicar estilos 
para cualqiuer cosa que ocurra entre el cuerpo del HTML que es para cualquier ele- 
mento que aparece entre las etiquetas <BODY> y </BODY>. En nuestro caso sólo 
estamos afectando el cuerpo del texto, de manera que haremos clic en la pestaña 
Texto en la ventana CSS. Activa el botón redondo Usar tipo de letra personalizado 
y selecciona una fuente tipográfica del menú desplegable. Nosotros seleccionamos 
la familia tipográfica Arial. Cuando se escoge una fuente tipográfica, se verá apli- 
cada instantáneamente en el texto de la página HTML. Haz cilc en Aceptar cuando 
termines. 



j 


J-Jíjjijij -Ja aatito C£3 






r * i£ ¿ m t i 


'"- :.f\i | ~>t -v. | -■;. ■■:!.. | :■■..>■ .:íh-:, | >;«,-, | _';:,=,:. | Aurai 




Hojas y reglas 


Tipo de letra: 
sin especificar 
predefinido: 


Peso de letra: sin especificar 


k 


-ahoja de estilos interna 
body 


Estilo de letra: j sin especificar 




Mayús./minüs.: 1 sin especificar 




Arial. Helvética, sans-serif [vj 
■:■■ Usartipo de letra personalizado: 


Alineación: sin especificar 


1=1 




|Anal| 


Decoraciones detento: 
D Sobrelineado 
i ] Tachado 
□ Subrayado 
O Parpadeo 


Ní.guno 




Tamaño de letra: 1 |v| ij 
Altura de línea: 1 (vj W 
Colon 






The quick brown fox ¡unps over the fazy dog 





Ejercicio 2: Evaluando el Código 

KompoZer agrega el código para los estilos en las etiquetas de estilos dentro de la 
sección <head> del documento. Puedes ver esto si ves el código fuente en la vista 
Código Fuente de la página. Estilos son escritos en bloques de declaración. Los 
bloques de declaración contienen propiedades y valores. Aquí tenemos un bloque 
de declaración del cuerpo de la página HTML. Dentro de la etiqueta de estilos 
verás: 
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body { 

f ont-f ami ly : Ar i al ; 
} 

En este código, la font-family es la propiedad, "Arial" es el valor. 

Ejercicio 3: Creando una Nueva Regla 

Los estilos pueden ser creados, modificados y borrados usando la ventana de esti- 
los CSS. Puedes redefinir una etiqueta HTML (lo cual hicimos en el Ejercicio 1) o 
creando un estilo personalizado llamado clase. Nosotros trabajaremos con clases 
en los siguientes ejercicios. Una clase es un modificador que puede ser aplicado a 
una etiqueta HTML para agregar un estilo. 

1 . Abre la ventana CSS . El estilo para la propiedad font-family que acabamos de 
crear y guardar en este panel será mostrado. Ignoraremos esto y escogeremos "Re- 
gla de estilo" del menú desplegable en el primer icono de la barra de herramientas. 





>JííJ¿j3 -Ja aarflu C£B 




í 


i 










g> *j ti> EÍ se ti 


General | Texto | ■■: ■ ;■:■ | [■■:■ ■>-:. | ■ ■■.■■■. \ . ■:. :.:-*■;, | ky:- 




@ímport 

iQ'media 

Hoja de estilos enlazada 

Hoja de estilos interna 


Regla de estilo 

Selector body 




font-family: Arial; 




Regla de estilo . 












Cancelar 


Aceptar 





2. Activa el botón redondo "estilo aplicado a todos los elementos de la clase". Una 
regla CSS es creada en dos partes, un selector y una declaración. El selector nom- 
bra la parte del documento HTML que será afectado por el estlio. La declaración 
le dice al código HTML como el selector es afectado en la regla. 



Hojas de estilo CSS 



* 



g5 • ti &5 * 



¡neral [ Texto | = ■: ■■;■:■ "| :■■, ■> :. p^T) _ -a-j \ 



listas Aural 



Bhoja de estilos interna 
'■body 



Nueva regla de estilo 

O estilo aplicado a todos los elementos de tipo 

p.e. h2 
® estilo aplicado a todos los elementos de la clase 
p.e. .miyclass 
■ estilo aplicado a un elemento con el atributo ID especificado 

p.e. #header 
. ■ regla de estilo personalizada 
p.e. div#r¡eader a:hover 



Crear un nuevo; 



' Crear regla de estilo 



274 



Hojas de Estilo: Separando la forma del contenido 



3. Nuestra regla dará formato al texto que será usado como Título. Nombra el 
selector .titulo 



UJ 



g5 - <& si m ti 


General | Texío | ->:■■ vio \ ■■■:■■ des | Caja | Listas | Aural 


Hojas y reglas 


Nueva regla de estilo 


El hoja de estilos interna 
1 body 


estilo aplicado a todos los elementos de tipo 

p.e. h2 
<D estilo aplicado a todos los elementos de la triase 

p.e. .myclass 
Crear un nuevo: 

■'.' estilo aplicado a un elemento con el atnbuto ID especificado 

p.e. #header 

'. regla de estilo personalizada 

p.e. div#header a:hover 


|o.,0 ^ . 


Crear regla de estilo : 






Cancelar Aceptar 



4. Haz clic en "Crear regla de estilo". 



'- 


1 


Hojas de estilo CSS |_xj 




General | Texto | - : ■: !■:■ | :.■: i¡.-: | ■ .-._.-. | .. ■:.>,: | --.i -. 




Hojas y reglas | 


Regla de estilo 

Selector: .título 


-Hhoja de estilos interna 
body 
■.título 








Cancelar Aceptar 







Consejo: Los nombres de clase deben comenzar con un punto. KompoZer agregará 
esto automáticamente. 

4. Dale a la nueva regla valores para la declaración. Hemos dado formato a título 
de la siguiente manera: 

Font-family: Georgia, Times New Román, Times, serif; Font Size: 36 pixels; Font- 
weight: bold; Font-style: italic; and Color: #F00. 

Haz clic en Aceptar para salir de la ventana. 



Hojas de estilo CSS 



« 



£3 - t*) id SS ti | Genera! \~- ->■■ [ : -v. ■;■.[ Bo ^ :■ |- .-■. - . | 



Listas Aural 



Hhoja de estilos interna 
body 
.título 



Regla de estilo 

Selecton .título 

Font-family: Georgia. Times New Román. Times, serif; 

Font Size: 36 pixels; 

-ont-weiqht: bold; 
Font-style: italic; 
Color: #F0O. 



Cancelar Aceptar 
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5. Ahora aplicaremos la nueva regla. Ve al documento HTML en la visión normal 
y escribe la frase "CSS separa la forma del contenido" en el área del diseño de la 
página HTML. 



6. Seleccione la frase en la visión normal y aplica la nueva regla usando el menú 
desplegable de las clases. 



if)tia¿iñlaiA../)nda J LjjtrriJj - ¿uiwsínt 



BEM l 



Archivo Editar Ver insertar Formato Tabla Herramientas Ayuda 



f. a H • 3 4 í ¡ 1 3 • 

Muevo Abrir Guardar Publicar Navegar Deshacer Renacer Enlace interno Enlace Imagen Tabla Formulario 



Texto del cuerpo 



- 



.nchura variable |v| 



- Administrador ds sitios 

Ver: Todos los archivos H 

# Ú) : " y 



S Mí Sitio 
E Otro Sitio 



33 



Hola Mundo! 
™ CSS separa la forma del contenido 







9 tj <$, 



/ u 



i estilos lF15erta nueva tabla a modifica las propiedades de ¡a tabla selecci 



c 



Normal | l™l Etiquetas HTMl|EE Código fuente | '■->, Vista preliminar 



<body> 



La frase adquiere las cualidades que definimos en la regla de .titulo. Guarda el 
archivo HTML (Command+S). 
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|j Normaf | EÜI Etiquetas HTMt | EE Código fuente | '--, Vista preliminar 



<body> <span cIass="título": 



7. Evalúa el estilo en la vista del código fuente. Verás la clase del título definida 
con el siguiente código: 

.titulo { 

font-family: Georgi a , Ti mes New Román , Times , ser i f ; 
font-weight: bold; 
font-style: italic; 

color: #ff0000; 
} 
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Nota la clase del título aplicada al texto más abajo en la página: 
<span class="título">CSS separa la forma del contenido</span> 

Ejercicio 4: Creando una hoja de 
estilo externa 

Hasta ahora el CSS que hemos creado ha sido salvado en nuestra área principal del 
HTML de la página index.html y aplicada al área del cuerpo de la misma página. 
El código CSS puede ser guardado también en una hoja de estilo externa. Guardar 
un CSS externamente tiene tres implicaciones: 

1 . El documento HTML dependerá de un segundo documento con una extensión 
.css para cualquier formato aplicado con un código CSS. 

2. La hoja de estilo externa puede ser aplicada a múltiples documentos HTML. 

3. El código CSS guardado en una hoja externa puede ser fácilmente modificado en 
un lugar (a diferencia de abriar múltiples archivos HTML). 

En este ejercicio crearemos una hoja de estilos externa, un archivo CSS que será 
aplicado al enlazarlo con el documento HTML. 

1 . En el panel CSS escoge "Hoja de estilos enlazada" del menú desplegable a la 
izquierda. 



l^Jija üa aatilu C£E 



Uü 



g5 »|t$ rf se t 


l 
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Hoja de estilos 

Tipo: text/css 

Desactivado: n Marque para desactivar hoja de estilos <no puede guardarse) 


Hoja de estilos enlazada 


1* 


Hoja de estilos interna 
Regla de estilo 


URL | ninguna (incrustada en el documento! 




Lista de medios: lall 




Número de reglas: 2 


Exportar hoja de estilos y cambiar a la versión exportada 






Cancelar Aceptar 



2. Dale un nombre al archivo CSS. También puedes dar un título a pesar de no ser 
necesario. 
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body 
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Alternativa: 
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text/css 

C 1 Marque para crearuna hoja de estilos alternativa 


URL 
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[¿ Escoja archivo 


Lista de medios 


|| 







Crear hoja de estilos 



(Advertencia: guarde el documento 'antes* de adjuntar una hoja de estilos lo 
(use el botón Recargar si la hoja de estilos no se descarga inmediatamente) 



Cancelar 



3. Haz clic en "Crear hoja de estilos". El archivo CSS será guardado en el mismo 
directorio que la página HTML mostrada en la vista Normal. 
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Lista de medios: all 


Número de reglas: 




Cancelar Aceptar 



4. Agrega una nueva clase llamada .resaltado (deja el resto de las características 
como lo hicimos en el Ejercicio 3, paso 3). En la definición de la regla CSS para 
.resaltado, escribe Background-color: #FFFF00. Haz clic en Aceptar para salir del 
diálogo. 
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Hojas y reglas 


Regla de estilo 


Sfhoja de estilos interna 


Selector .resaltado 


samicss.css 
.resaltado 


background-color #nTTO0; 










Cancelar Aceptar 









5. En la vista del código fuente de la página verás el CSS enlazado con un código 
que se ve así: 

<link rel="stylesheet" href ="mi css . css" type="text/ 
c s s " > 
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6. Ahora modifica index.html en la visión normal. Selecciona la palabra "separa" y 
usa el menú desplegable CSS para escoger la clase .resaltado 
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Normal | HÜI Etiquetas HTMt | EE Código fuente | ' ■. Vista preliminar | 



<body> <span class= ni títjlo n > 



7. Elija el Archivo > Guardar. El comando Guardar Todo, guarda todos los docue- 
mtos. 

8. Abre el archivo de index.html en un navegador de Internet para ver el documen- 
to con los estilos aplicados. 

Para ver que el documento miestilo.css está afectando el archivo index.html, 
mueve el archivo de miestilo.css a una nueva localización en tu disco duro. Por 
ejemplo, tenemos ambos archivos guardados en una carpeta llamada capitulol7 en 
nuestro Escritorio. Mueve miestilo.css de la carpeta, al Escritorio. Recarga el archi- 
vo de index.html en el navegador de Internet. 

El estilo no va a afectar la página HTML si la página no pede encontrarlo. El 
archivo enlazado esta apuntando a la carpeta donde el archivo HTML fue guar- 
dado. Al mover el archivo, estás rompiendo el elnace entre el los archivos CSS y 
HTML. Mueve el CSS de nuevo a la misma localización donde el archvo HTML 
esta guardado y recarga el navegador de nuevo. El elncace debería estar areglado. 
endo el archivo, usted está rompiendo las relaciones entre los archivos del CSS y 
de HTML. Mueva el archivo del CSS de nuevo a la misma localización en donde 
se almacena el archivo de HTML y restaure el hojeador otra vez. El acoplamiento 
debe ser fijo. 
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"El arte es creado por los artistas de modo que el espectador tenga 
la oportunidad de crear algo." - Brian Eno 

Estamos a punto de tomar los primeros pasos de lo que tiene el potencial de ser 
un largo e ilustre viaje a medida que aprendemos a programar. En los capítulos 
restantes aprenderemos que programar, o codificar, es otro entorno en el que pode- 
mos producir trabajos creativos. En éste punto, el lector se preguntará "¿Por qué? 
¿Cuál es la razón de hurgar en éste largo y complicado tema cuando hay tantas 
herramientas fantásticas disponibles para crear arte digital?." 

Para responder esto, empezaremos con una corta definición. Herramientas como 
Photoshop e Illustrator son geniales, y las metáforas para el medio que producen 
son claras: uno puede pensar en una fotografía, un dibujo o una pintura. Con Pro- 
cessing - el entorno de código explicado en detalle en los Capítulos 18, 19 y 20, y 
herramientas como estas, el medio es el programa de la computadora. De manera 
que, ¿cuál es la metáfora para entender la esencia de un programa? Un programa 
es como una pequeña máquina. Consiste en un grupo de instrucciones que una 
computadora puede entender, y deben ser ejecutados en un orden en específico 
para poder correr correctamente. La creación de éstas máquinas es conocido 
como programar o codificar. Nosotros podemos crear programas que producen los 
artefactos digitales con los cuales ya estamos familiarizados -imágenes, en movi- 
miento o estáticas, usando una interfaz de computadora que está disponible en tu 
computadora de escritorio o computadora portátil. 

De manera que, ¿por qué molestarse en crear un programa para hacer una imagen 
cuando ya hay tantas herramientas para hacerlo nosotros mismos? La respuesta: 
porque un programa es dinámico. Un programa puede hacer una imagen o un vi- 
deo, o puede responder a la acción de un usuario, o ejecutar una cantidad inmensa 
de repeticiones o procesar una gran cantidad de datos. Puede inclusive ser una he- 
rramienta que otros usan para crear imágenes. Como programador, tienes el poder 
de crear un sistema que permite a otras personas expresar su creatividad. 

Ve estas referencias: 

• "Yellowtail" de Golán Levin 

• Pinturas de Brian Eno "77 millones de" 

• Resultados de los ejercicios del capítulo 18 
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Ejercicio 1: Hola Mundo 



Dibujar un círculo en Processing es esencialmente el "Hola Mundo" practicado en 
el entorno de desarrollo Processing. 

1 . Escribe o copia y pega el siguiente pedazo de código en el entorno de desarrollo 
Processing, (size: tamaño, ellipse: elipse). 



size(400, 400); 
eUipse(200,200,100,100) ; 

2. Ejecuta el código. 



En lenguaje Processing, ésto es llamado Ejecutar el boceto (playing the sketch). 
Ejecuta el boceto al hacer clic en el botón Play en la parte superior izquierda del 
entorno de desarrollo Processing. Una imagen de un círculo blanco con un fondo 
gris aparecerá. 
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3. Analiza el código. 

Al igual que seleccionar el tamaño del papel al dibujar, o decidir el tamaño de tu 
documento en diseño gráfico, debemos inicializar nuestro espacio de dibujo con un 
área definida. La primera línea de código hace esto, le dice a Processing que cree 
una ventana de un tamaño definido. Nuestra ventana es de 400 pixels de alto por 
400 pixels de ancho. 

La próxima línea de código es lo que dibuja el círculo en la pantalla. Processing 
(como la mayoría de los programas de dibujo computarizados) se basa en un 
sistema reticular, similar al sistema de coordenada (x,y) que aprendiste en la clase 
de álgebra. La variable x, especifica la posición horizontal y la y específica la 
posición vertical. A diferencia del álgebra, las coordenadas (0,0) se encuentran en 
la esquina superior izquierda de tu ventana. La variable y se incrementa a medida 
que te mueves hacia abajo en la ventana. Los primeros dos números luego del co- 
mando ellipse indican el centro de la figura en la posición (x,y), y los dos números 
siguientes indican el ancho y el alto de la figura. 

Nota que el comando se llama ellipse (elipse), a pesar de que un círculo sea dibuja- 
do. Ya que especificamos el mismo valor (100) para el ancho y el alto de la elipse, 
la forma resultante es un círculo. 

4. Haz comentarios en tu código. 

Muchos programadores toman prestado pedazos de código de referncias en línea u 
otros lugares. Es prácticamente imposible recordar lo que todos los comandos de 
Processing (PDA) hacen, o por qué incluíste cada pedazo de código en tu docu- 
mento. Afortunadamente, podemos dejar notas para nosotros mismos en medio del 
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código explicando el código que estamos usando nosotros mismos u otra persona 
que quiera trabajar con nuestro código. A éstas notas se les llama comentarios. 

Escribe lo siguiente en tu boceto: 

/* 

Creadores: Rory Solomon y Becky Heritage 

Fecha: Feb. 8, 2009 

Licencia: CC-BY-SA 

*/ 

size(400, 400); // tamaño del boceto 
// dibuja un circulo 
ellipse(200 J 200 J 100 J 100) ; 

La sintaxis guión diagonal-estrella (/*) al principio y estrella-guión diagonal (*/) 
al final de un comentario, le dice a Processing que el texto contenido entre estos 
dos, es un comentario. De manera que en el ejemplo, las primeras cinco líneas del 
código entre /* y */ son comentarios. Processing ignora todos los comentarios al 
ejecutar el boceto. En otras palabras, los comentarios no son ejecutados. Éste tipo 
de comentario es conocido como comentario en bloque. 

Si eres nuevo programando, deberías desarrollar buenos hábitos y practiar el dejar 
comentarios colocando tu nombre, la fecha y la licencia con la cual publicarás tu 
código en un comentario en bloque al principio de tu boceto. Ya que Processing es 
un proyecto de código abierto con soporte de una comunidad con pensamiento en 
común, con regularidad crearás aplicaciones de cosas que otras peronas han produ- 
cido. Cuando hagas ésto, debes dar atribuciones a su trabajo. 

Revisa el capítulo 2 para más información con respecto a los tipos de licencias y la 
naturaleza de participación en la cultura digital. 

Comentarios en líneas son controlados por otra sintaxis. Puedes comentar una 
línea a la vez, o simplemente parte de una línea, usando guión diagonal-guión 
diagonal (//). Todo lo que esté después de // es convertido en un comentario, pero 
solo hasta el final de ésa línea. 

Si ejecutas el boceto de nuevo, verás la misma imagen. Aunque hayamos agregado 
más líneas a nuestro código, no afectan el resultado de nuestro boceto. 
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A veces tu código no resultará en lo esperado. Este es un hecho de la vida. En éste 
ejercicio introduciremos un error a propósito en el código y veremos cómo se ve. 

1 . Borra el punto y coma de la línea 9 para que el código se vea como el nuestro: 
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/* 

Creadores: Rory Solomon y Becky Heritage 
Fecha: Feb. 8, 2009 
Licencia: CC-BY-SA 
*/ 

size(400, 400); // tamaño del boceto 
// dibuja un circulo 
ellipse(200,200,100,100) 

2. Ejecuta el boceto. El boceto se negará a ejecutarse. En vez de ejecutarse, obten- 
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Creadores: Rory Solomon y Becky 
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Licencia: CC-BY-5A 
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size(400, 400); // tamaño del boceto 

// dibuja un circulo 

el 1 i pse|200, 200, 100,100)1 




drás un mensaje de error en la parte de abajo de la ventana. 

3. Analiza el código. 

Cuando tu boceto no se ejecuta y obienes mensajes de error, es que hay un error en 
el código. Podría ser que tu código no es consistente con las reglas de sintaxis de 
Processing, o puede ser un simple error de escritura en un nombre de un comando. 

Arreglar errores en tu código es depurarlo y es conocido como debugging. Existen 
recursos para errores comunes y depuración en Processing en la página de referen- 
cia de Processing: 



¡ http://www.processing.org/reference/! ¡> 
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En éste caso, el error es que falta un punto y coma. Por ahora, asume que cada 
línea de código de Processing necesita un punto y coma al final. (Aprenderamoe 
unas cuantas exepciones de ésta regla pronto.) Arregla tu código escribiendo de 
nuevo el punto y coma al final de la línea 9 y ejecuta tu boceto de nuevo. 

Ejercicio 3: Color y Estilos de dibujo 

Por ahora podemos pensar en los comandos de Processing en dos tipos: aquellos 
que dibujan cosas en la pantalla y aquellos que deteminan la apariencia de esas 
cosas. Por ejemplo, ellipse() es un comando con una respuesta visual directo — 
especificamos su ubiacación y tamaño. En éste ejercicio, agregaremos comandos 
que cambian su color y estilo visual. 

1 . Escribe o copia y pega el nuevo código que agregamos aqui: 

/* 

Creadores: Rory Solomon y Becky Heritage 

Fecha: Feb. 8, 2009 

Licencia: CC-BY-SA 

*/ 

size(400, 400); // tamaño del boceto 

smooth () ; 
noStroke () ; 
fiU(100, 100,250) ; 

// dibuja un circulo 
ellip5e(200,200 ) 100,100) ; 
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2. Ejecuta el boceto o corre el código. 

3. Analiza el código. 

Usamos los tres nuevos comandos sgiuentes: 

• noStroke()es una instrucción de no usar borde al dibujar el círculo. 

• smooth () es una instrucción de utilizar alias para hacer las líneas más 
suaves. 

• fill (100.100.250) declara qué color será utilizado para llenar la 
forma. 

Los números en paréntesis luego de un comando son llamados "parámetros" o 
"argumentos". No todos los comandos requieren argumentos. El comando fill() 
requiere un argumento para el color, y todos los colores en Processing son creados 
con 3 números correspondientes a los valores RGB (rojo, verde y azul) que quieres 
usar. Cada número de ser entre 255. (Los colores también pueden ser especifi- 
cados en modo HSB, vee http://processing.org/reference/colorMode_.html para los 
detalles.) 

Intenta modificar los números RGB para producir diferentes colores cuando eje- 
cutes el boceto. Si necesitas un color en específico, Processing ofrece también un 
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HH 



FFFFFF 



selector de colores en Tools > Color Selector, que puedes usar para conseguir el 
valor RGB de una referencia visual. 

Ejercicio 4: Entendiendo el orden al dibujar 

Los comandos de Processing son ejecutados de la manera típica de arriba hacia 
abajo, así que cualquier comando que cambie la apariencia de objetso como noS - 
troke() o fill ( ) se aplicará a todos los comandos siguientes hasta que otro 
comando escriba sobre ellos. (Siempre hay maneras de modificar éste comporta- 
miento de arriba hacia abajo usando "estructuras de control". Aprendermos sobre 
algunas de ellas más adelante en los capítulos siguientes.) 

Agrega la siguiente línea al final de tu boceto y haz clic en Run: 

rect (150.225.100.100); 

Como el comando de elipse, r e c t ( ) (abreviatura de rectángulo en inglés) dibuja 
una nueva figura en nuestra ventana. Como ellipse(),los primeros dos núme- 
ros definen la posición, ero en éste caso, la esqiuna superior izquierda de nuestra 
figura, no el centro. Al igual que ellipse(), definimos 100 tanto para nuestro 
ancho como nuestro alto, de manera que el resultado es un cuadrado. 
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5. Ejecuta el boceto. Nota qu ahora tenermos una forma indefinida, parecida a una 
mancha en nuestra pantalla. 

Esto se debe a que el comando fill() aún tiene efecto. Trata de agregar otro fill() 
antes de rect() y define un color rojo. Tu código debería verse algo así: 

/* 

Creadores: Rory Solomon y Becky Heritage 
Fecha: Feb. 8, 2009 
Licencia: CC-BY-SA 
*/ 

size(400, 400); // tamaño del boceto 

smooth() ; 
noSt roke () ; 
7111(100,100,250) ; 

// dibuja un circulo 
ellipse(200,200,100,100) ; 

fill(250,100,100) ; 
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// dibuja un cuadrado 
rect(150,225,100,100) ; 

Nota como el cuadrado rojo aparece encima del círculo azul. Esto se debe a la 
naturaleza de arriba a abajo de la ejecución de Processing. Las figuras que son 
dibujadas primero aparecen debajo de las que son dibujadas después. 



Ejercicio 5: Agrega Transparencia 

Processing permite cualquier color RGB con un cuarto número opcional que 
representa el grado de opacidad. Éste cuarto número es llamado alpha (alfa). Éste 
número debería tener un valor comprendido entre y 255, donde cero (0) inidca 
transparencia total y 255 opacidad completa. 

1 . Agrega un 4to número a tu rojo fi 1 1 ( ) , para crear transparencia en tu cuadrado. 

2. Ejecuta el boceto. 
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Ejercicio 6: Agrega un fondo un y triángulo 

Terminaremos nuestra composición agregando un triángulo amarillo. 

1 . Al final de nuestro código, agrega el siguiente comando: 

fill(250,250, 100,100) ; 
triangle(125,200, 275,200, 200,100); 



A diferncia de ellipse() y rect(), un triangulo es definido por tres puntos. El código 
de arriba dibuja un triángulo amarillo translúcido (nota nuestro cuarto valor alfa 
RGB de 100) con vértices en (125, 200), (275,200), y (200,100). 

2. Agrega un fondo blanco a la ventana con el comando background(). El color en 
Processing puede ser definido también con un número en específico (comprendido 
entre y 255) que representa un tono de girs — con siendo negro y 255 blanco. 
Nota que por el orden de dibujo, background(), tiene que estar antes que cualquier 
otra figura o se creará encima de las figuras. Agrega este comando justo después 
de sizeQ. Tu código debería verse como el siguiente: 
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/* 

Creadores: Rory Solomon y Becky Heritage 
Fecha: Feb. 8, 2009 
Licencia: CC-BY-SA 
*/ 

size(400,400) ; // tamaño del boceto 

background (255) ; 

smooth () ; 
noStroke () ; 
fill(100, 100,250) ; 

// dibuja un circulo 
ellipse(200 J 200 J 100 J 100) ; 

fill(250,100,100,150) ; 

// dibuja un cuadrado 
rect(150,225,100,100) ; 

fill(250,250,100,100) ; 
triangle(125,200, 275,200, 200,100); 
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Ejercicio 7: Encuentra más 
instrucciones para intentar por 
tu cuenta 

La sección de referencia de la página web de Processing, http://processing.org/ 
reference/index ext.html contiene una lista de instrucciones definitivas de Proces- 
sing. Estas instrucciones son llamas API (application program interface en inglés 
que en español sería algo como interfaz de programación de aplicaciones) . Puedes 
usar la referencia de Processing para detalles sobre comandos que usamos aqui, y 
encontrar nuevos comandos para tus propios proyectos. Por ejemplo, además de 
las formas que dibujamos aquí, Processing tienen comando q u ad ( ) para cuadri- 
láteros ybeginShapeQ (iniciar forma) y endShape() (terminar forma) para 
formas arbitrarias. 
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Movimiento y Ritmo de los Cuadros 

El ritmo es una consideración esencial en la producción de gráficos en movimien- 
to. Una de las más simples y comunes firmas del tiempo es 4/4, donde cuatro 
marcas son escuchadas de manera uniforme sobre una barra de música y cada nota 
es una marca. En la música House, las marcas son contadas en ciclos de ocho. El 
ritmo es establecido y llega a su tope en la cuarta marca. Se reduce en las próxi- 
mas cuatro marcas, para prepararse para el próximo grupo de marcas. Uno de los 
conceptos clave para entender animación es visualizar el tiempo. Bien se que estás 
manteniendo una referencia de la partitura musical o cuadros gráficos en una línea 
de tiempo, contar tiempo es importante y "ver" la cuenta es necesaria. 

Las primeras animaciones experimentales pueden ser vistas como un ejemplo 
de ver el tiempo con figuras básicas y abstractas. Considera el diseño formal de 
balance y movimiento mientras ver animaciones tempranas de Osear Fischinge 
(puedes conseguirlas a youtube). El trabajo que haremos es parecido a su trabajo 
posterior, "Early Abstractions" (abstracciones tempranas 1946 - 57). 

El homenaje de Harry Smith a Fischinger permanece abstracto, con el uso de una 
mayor cantidad de capas más complejas. Nota la armonía en los colores y el balan- 
ce formal. El balance cambia a través del tiempo, las fguras cambian su forma y 
transparencia. El ritmo es usado para crear senitdo predecible dentro de la abstrac- 
ción. 

Las relaciones del diseño formal que hemos creado en composiciones estáticas son 
activas también en animaciones. Repetición, simetría, asimetría, balance y ritmo 
se envuelven un nuevo elemento formal: el tiempo. En los ejemplos visuales, las 
formas son usadas una vez más para crear unidad entre los diferentes momentos de 
la animación. Al mismo tiempo, transformaciones en la escala, color y valor crean 
contraste, que ayuda a diferencia momentos en la animación. Los primeros experi- 
mentos en animación mantuvieron el tiempo visible con figuras abstractas. El ritmo 
es clave en el film Rhytmus 21 (1921). Con figuras más simples de Richter fue 
capaz de explorar las transformaciones de las figuras sobre el tiempo a través del 
tamaño. Todo es entendido a través de un paso constante y consistente que lleva a 
la contenplación de la forma pura. 

Ve el film de Hans Richter aquí: http://www.ubu.com/film/richter rhythmus.html 

En los años 70, Lillian Schwartz hizo un experimento de animación computa- 
rizada en Bell Labs. Su trabajo puede verse como las primeras animaciones de 
Richter, pero el video fue programado usando una computadora. Su proceso fue 
similar a nuestros ejercicios. En su animación de 170 UFO's (objetos voladores 
no identificados), introdujo resultados computarizados en ediciones más rápidas y 
figuras elementales. La estética psicodélica encaja con el tema. 

Ve el video de Lillian Schwartz aquí:_ 
http://www.youtube.com/watch?v=kic8YlHbhvI 
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Ejercicio 1: Introducción ciclo 
de dibujo 

Comienza con el siguiente código. Este código se ve exactamente como el boceto 
que acabamos de hacer en el Capítulo 18, pero ahora está arreglado en bloques. 

/* 

Creadores: Rory Solomon y Becky Heritage 

Fecha: Feb. 8, 2009 

Licencia: CC-BY-SA 

*/ 

void setupO { 

size(400,400) ; // tamaño del boceto 
} 

void draw() { 
background (255) ; 

smooth () ; 
noStrokeO ; 
fiU(100,100,250) ; 

// dibuja un circulo 
ellipse(200, 200, 100,100) ; 

fill(250,100,100,150) ; 

// dibuja un cuadrado 
rect(150,225,100,100) ; 

fill(250,250,100,100) ; 
triangle(125,200, 275,200, 200,100); 
} 



Un bloque es un grupo de comandos entre llaves, {}. Aquí tenemos dos bloques: 
setup () y draw () . 

void setup(){ 

// bloque de código "setup" 

} 

void draw() { 

// bloque de código "draw" 
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Estos dos bloques son partes especiales de un boceto en Processing. Los comandos 
ensetup () son ejecutados una vez cuando el boceto es ejecutado, y los coman- 
dos en d r aw ( ) son ejecutados repetidamente siempre y cuyo el boceto se esté 
ejecutando. 

De manera que ahora cuyo ejecutas el programa, a pesar de que la imagen se ve 
estática, está siendo borrada y re dibujada, una vez por cuadro. El ritmo de los 
cuadros por defecto para un boceto en Processing es de 60 cuadrados por segundo. 

Ahora que tenemos nuestro código dentro del "ciclo de dibujo" (draw) , podemos 
crear animaciones. Modificándolos comandos dentro del bloque d r a w ( ) , las 
imágenes dibujadas serán ligeramente diferentes en cada iteración. Manten esto 
presente a medida que trabajamos en el siguente ejercicio. 



Ejercicio 2: Variables 



En este ejercicio agregaremos una variable para describir la posición vertical del 
círculo. Una variables es como un armario en un gimnasio. Es un lugar donde 
puedes guardar algo. Y como el número de tu armario en el gimnasio, una variable 
tiene un nombre al cual puedes hacer referencia luego. Puedes dar un nombre a tu 
variable que sea intuitivo y de fácil lectura. El siguiente código es una declaración 
de una variable: 

int posi cionYci rculo = 200; 

Las letras "int" definen la variable como un integer, lo cual significa que solo 
puede guardar números enteros. El nombre de la variable es "posicionYcirculo". 
Puedes nombrar una variable de cualquier manera siempre y cuyo el nombre este 
compuesto por letras, números, guiones y guiones bajos (a-z, A-Z, 0-9, - y _). En 
este caso, llamamos nuestro variable "posicionYcirculo" porque va a guardar la 
posición y de nuestro círculo. Finalmente, asignaremos el valor de 200 a nuestra 
variable. Para usar la metáfora del armario del gimnasio, nuestro armario se llama 
posicionYcirculo, y solo guarda números enteros y ahora tenemos guardado el 
número entero con un valor de "200" en nuestro armario. 

Con esta variable declarada y el valor asignado a ella, podemos sustituir la palabra 
"posicionYcirculo" para el valor de 200 de principio a fin, en lugar de insertar el 
valor manualmente que se encuentra guardado en nuestra variable. 



1 . Copia y pega el nuevo código en tu PDE (Processing Development Environ- 
ment): 
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/* 

Creadores: Rory Solomon y Becky Heritage 
Fecha: Feb. 8, 2009 
Licencia: CC-BY-SA 
*/ 

// declaración de variables 
int posicionYci rculo = 200; 

void setupO { 

size(400,400) ; // tamaño del boceto 
} 

void draw() { 
background(255) ; 

smooth () ; 
noStrokeO ; 
fill(100,100,250) ; 

// dibuja un circulo 

ell i pse (200, posicionYci rculo, 100,100) ; 

fill(250,100,100,150) ; 

// dibuja un cuadrado 
rect(150,225,100,100) ; 

fill(250,250,100,100) ; 
triangle(125,200, 275,200, 200,100); 
} 



2. Juega con el boceto y analiza el código. Ejecutar este código debería dar exacta- 
mente el mismo resultado que antes. Todo lo que hicimos fue reemplazar el valor 
200 en el comando ellipse() con la variable posicionYcirculo, que tiene un valor 
asignado de 200. 
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La variable posicionYci rculo ha sido usada para establecer la posición verti- 
cal del círculo. De manera que si cambiamos el valor de posicionYci rculo, 
el círculo se moverá hacia arriba o hacia abajo. En este ejercicio, nuestra variable 
va a ser usada para animar. Al cambiar un poco el valor de posicionYci rculo 
cada vez que dibujamos el boceto -lo que significa, cada vez que el bloque de di- 
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bujo se ejecuta- y muestra esas imágenes una tras la otra, produciremos un círculo 
animado. 

Mira esta línea de código: 

posi cionYci rculo = posi ci onYci rculo + 1; 

Esto hace dos cosas ; aritmética básica , agregando laposicionYcirculoy 
asignando posicionYci rculo a un valor. Juntos lo que significa es "toma el 
valor de posicionYci rulo, agrégale 1 , y asígnale ese valor de nuevo a 
posicionYci rculo". De manera que si ejecutas este código , el valor de la 
variable se incrementará en 1 en cada cuadro. 

2. Agrega esta nueva línea al final del bloque de código d r a w ( ) . Tu código debe- 
ría verse así: 

/* 

Creadores: Rory Solomon y Becky Heritage 

Fecha: Feb. 8, 2009 

Licencia: CC-BY-SA 

*/ 

// declaración de variables 
int posicionYci rculo = 200; 

void setupO { 

size(400,400) ; // tamaño del boceto 
} 

void draw() { 

background(255) ; 

smooth () ; 
noStrokeO ; 
fill(100, 100,250) ; 

// dibuja un circulo 

ellipse (200, posi cionYci rculo, 100, 100) ; 

fill(250,100,100,150) ; 

// dibuja un cuadrado 
rect(150,225,100,100) ; 

fill(250,250,100,100) ; 
triangle(125,200, 275,200, 200,100); 
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// mueve el circulo 

posi cionYci rculo = posi ci onYci rculo + 1; 
} 



3. Juega con el boceto. Tu círculo se moverá de arriba a abajo en la ventana. 



Ejercicio 4: Círculo Rebotando 

Eso fue agradable , pero luego de unos segundos, el círculo desaparece. Cambie- 
mos nuesto código de manera que el círculo rebote entre la parte inferior de la caja 
roja y la parte superior de la ventana. Si el círculo llega a alguno de estos lugares, 
deberá cambiar de dirección. Por ahora, el movimiento del círculo es creado por 
un simple + 1 . 

posi cionYci rculo = posi cionYci rculo + 1; 

Para hacer que el círculo cambie de dirección, necesitamos modificar el valor de 
ese + 1 . Lo que queremos es que el valor varíe entre + 1 (hacia abajo) y - 1 (hacia 
arriba). Para hacer que cualquier valor se modifique, necesitamos reemplazarlo 
con una variable. De manera que haremos una nueva variable y le agregaremos 
una sección de declaración a esa variable en nuestro boceto. 

// declaración de la variable 
int posicionYci rculo = 200; 
int velocidadCi rculo = 1; 

Ahora que tenemos nuestra variable en el lugar, vamos a aprender una nueva técni- 
ca: pseudo-código. Pseudo-código es escribir lo que quieres que pase en lenguaje 
común, y luego traduciendo cada parte en código real. Por ejemplo, queremos 
agregar esto: 

Si el circulo llega al borde superior del boceto o 
al borde inferior de la caja roja, entonces cambia 
de di rección . 

Primero, ¿cómo sabemos cuyo el círculo se encuentra en cualquiera de estos dos 
lugares? Podemos comparar su posición (posicionYcirculo) con los números de la 
posición de estos lugares, que son y 325 respectivamente. Ya que el círculo tiene 
un diámetro de 100 pixels, tocará el borde cuyo su centro se encuentre a 50 pixels 
del borde. 

Esto significa que la posición y de nuestro círculo debería estar entre 50 y 275 todo 
el tiempo. Si el círculo está dentro de este rango, debería seguir moviéndose en la 
misma dirección. Si se encuentra fuera de este rango, debería cambiar de direc- 
ción. Así que nuestra oración se convierte en lo siguiente: 
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Si la posición del circulo es menor a 50 o mayor a 
275, entonces cambiará su dirección. 

Traducido a Processing, esto es conocido como un declaración condicional "if 
statement" , escrito así: 

si ( posi cionYci rculo < 50 | | posi ci onYci rculo > 275 

) { 

entonces cambia de dirección. 

} 

Ahora necesitamos hacer que cambie realmente de dirección. Aqui es cuyo nuestra 
nueva variable se hace útil. Nuestra variable velocidadCirculo es inicializada con 
un valor de 1 , la cual hace que el círculo se mueva hacia abajo. Cuyo llega a algu- 
no de los límites, queremos que retroceda. Para cambiar el +1 en -1 , lo único que 
tenemos que hacer es multiplicar por -1 . Esto es conveniente, porque para cambiar 
de nuevo, hacemos lo mismo. Sólo necesitaremos una declaración condicional (if 
statement) en nuestro código. 

if (posi cionYci rculo < 50 | | posi cionYci rculo > 
275) { 

velocidadCirculo = velocidadCirculo * -1; 
} 

Hemos llegado al código real. 

1 . Coloca el código anterior al final del bloque de dibujo. Cambia el comando 
previo usado para mover el círculo. En lugar de +1 , es ahora +velocidadCirculo: 

/* 

Creadores: Rory Solomon y Becky Heritage 

Fecha: Feb. 8, 2009 

Licencia: CC-BY-SA 

*/ 

// declaración de variables 
int posicionYci rculo = 200; 
int velocidadCirculo = 1; 

void setupO { 

size(400,400) ; // tamaño del boceto 
} 

void draw() { 

background(255) ; 
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smooth () ; 
noStrokeO ; 
fiU(100,100,250) ; 

// dibuja un circulo 

ell i pse (200, pos i ci onYci rculo, 100,100) ; 

fill(250,100,100,150) ; 

// dibuja un cuadrado 
rect(150,225,100,100) ; 

fill(250,250,100,100) ; 
triangle(125,200, 275,200, 200,100); 

// move the circle 

posi cionYci rculo = posi ci onYci rculo + velocidad- 
Ci rculo ; 



if (posi ci onYci rculo < 50 | | posi cionYci rculo > 
275) { 

velocidadCi rculo = velocidadCi rculo * -1; 
} 
} 
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Ejercicio 5: Modifica la Velocidad de 
Los Cuadros 

Mencionamos anteriormente que Processing ejecuta todo dentro del ciclo de dibujo 
con cada cuadro, y los cuadros son mostrados a una velocidad de 60 por segundo. 
Puedes modificar la velocidad de los cuadros en el que el boceto está siendo ejecu- 
tado, agregando la siguiente línea de código: 

f rameRate (120) ; 

El círculo debería ahora moverse al doble de velocidad ya que hay tantos cuadros 
como segundos. Puedes experimentar con este número para ver su efecto. Mien- 
tras menor sea el número, más lenta y torpe será tu animación; mientras mayor sea 
el número la animación se ejecutará más rápido y suave. 
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Interactividad 

La interactividad es un concepto de finales del siglo 20 principios del siglo 2 1 . 
Caminamos escuchando nuestro iPod mientras mandamos un mensaje de texto 
con nuestros teléfonos celulares, manejamos de acuerdo a las direcciones satelita- 
les que nos da una voz computarizada y estamos viendo constantemente nuestros 
blogs, páginas de Flickr, Alertas de Google y correo electrónico. 

La interactividad no es algo nuevo. El arqueólogo Alexander Marschak ha argu- 
mentado que Lascaux fue un sitio interactivo; fue un lugar que la gente visitaba 
para dejar su marca en él. Desde el ajedrez al basquetbol y el tennis, los juegos 
son formas antiguas de interacción, diversión intelectual y diversión. A pesar de 
que la interactividad no es algo nuevo, a ido crecido persuasivamente a medida 
que se relaciona con información, personas y entretenimiento. Construir desde la 
forma más básica de argumentos lógicos, los primeros programadores de computa- 
doras crearon juegos. Spacewar, Pong, y Space Invaders comparten más o menos 
el mismo esquema de interactividad; mover a la derecha, mover a la izquierda, 
disparar un misil, ¿dio en el blanco?, si dio en el blanco, entonces el extraterrestre 
explota; si no dio en el blanco, nada pasa. 

El vocabulario básico de interactividad es usado en el lenguaje de programación de 
Flash, ActionScript3.0. Algunas de las cosas más básicas que podemos programar, 
registran los clics del usuario al empezar y al terminar en la línea del tiempo. Ese 
es el enfoque de los siguientes ejercicios. 

Ejemplos visuales 




Spacewar, 1961 , Martin Graetz, Stephen Russell, y Wayne Wiitanen, programa 
computarizado para DEC PDP-1 . (Foto CC-BY Joi Ito) 
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En 1961 , en plena Guerra Fría de USA con la Unión Soviética, tres estudiantes de 
postgrado de MIT (Martin Graetz, Stephen Russell, y Wayne Wiitanen) programa- 
ron Spacewar, el primer juego de video. En el juego dos naves espaciales disparan 
la una a la otra. Los creadores agregaron estrellas en movimiento con cambios de 
brillo, una hazaña tecnológica para ese tiempo. Si desglozamos el juego en sus 
interacciones principales, tu y tu oponente pueden mover la nave espacial de dere- 
cha a izquierda, ir hacia adelante, ir hacia atrás y disparar. Por último, el programa 
registra si tu nave ha sido alcanzada por el misil de tu oponente. Esto es bastante 
sencillo, pero forma la estructura fundamental para un juego basado en la interacti- 
vidad. Simplemente: mueve tu avatar y disparale a cosas. 




Trigger Happy, 1998, Jon Thomson y Alison Craighead, programa de computadora 
escrito en Macromedia Director, el precursor de Flash. (http://www.thomson-craig- 
head .net/docs/thap .html) 

En 1998 el dúo de artistas Jon Thomson y Alison Craighead crearon Space Inva- 
ders inspiraron el juego y la instalación de arte llamada "Trigger Happy". Mientras 
el participante juega algo parecido a Space Invaders, el contenido es algo diferente. 
El jugador lee y dispara a pedazos de texto que crean un argumento teórico sobre 
la muerte de la autoría individual. El expectador de la instalación se convierte en 
un colaborador en la autoría del texto de la instalación. Desde el punto de vista de 
los jugadores, jugar Trigger Happy es como jugar Space Invaders donde el control 
mueve el avadar a la derecha e izquierda y dispara. 

Ejercicio 1: Introducción de Verdadero 
y Falso 

En este capítulo crearemos interactividad básica. Queremos crear controles para 
que el usuario pueda activar y desactivar nuestra animación. Cuando ciertas con- 
diciones se dan, el programa deberá continuar actualizando la posición de nuestro 
círculo, por el contrario, la posición quedará fija. En programación, las condicio- 
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nes como estas son llamadas estados. Nosotros queremos mantener registro del es- 
tado de nuestro boceto. Para hacer esto, crearemos una nueva variable. Registrará 
si el círculo se está moviendo. Vamos a llamarla mover. 

1 . Agrega la siguiente línea debajo de las declaraciones de variables que hicimos 
en el Capítulo 19: 

boolean mover = true; 

La palabra clave "boolean" introduce un nuevo "tipo de dato". Los datos ante- 
riores que vimos fueron "int", los cuales guardan un número completo, "boolean" 
indica que nuestra variable sólo puede tener dos valores true (verdadero) o false 
(falso) por ahora. Luego cambiaremos esto. 

2. Usa la nueva variable. Agrega la declaración condicional "if ' que se muestra a 
continuación debajod e la línea de código que actualiza la poisición del círculo: 

if ( mover ) { 

posi cionYci rculo = posi ci onYci rculo + velocidad- 
Ci rculo ; 
} 



Debido a que la variable mover es de tipo "boolean", podemos usarlo directamente 
como la condición de la declaración condicional "if '. Cuando "mover" es verda- 
dero, la declaración condicional ejecutará el código dentro de ella; cuando "mover" 
es falso no se ejecutará. 

Ejecuta el boceto y no deberías ver ningún cambio en el comportamiento. Nuestra 
variable "mover" esta establecida como verdadera, de manear que nuestra posición 
es actualizada en cada cuadro. Tu código debería verse asi: 

/ * 

Creadores: Rory Solomon y Becky Heritage 

Fecha: Feb. 8, 2009 

Licencia: CC-BY-SA 

*/ 

// declaración de variables 
int posicionYci rculo = 200; 
int velocidadCi rculo = 1; 
boolean mover = true; 

void setupO { 

size(400,400) ; // tamaño del boceto 
} 
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void draw() { 
background (255) ; 

smooth() ; 
noStrokeO ; 
fiU(100,100,250) ; 

// dibuja un circulo 

el 1 i pse( 200, posición Ye i reulo, 100, 100); 

fill(250,100,100,150) ; 

// dibuja un cuadrado 
rect(150,225,100,100) ; 

fiU (250,250, 100, 100) ; 
triangle(125,200, 275,200, 200,100); 

// mover el circulo 
if ( mover ) { 

posi cionYci reulo = posi ci onYci reulo + velocidad- 
Ci reulo ; 
} 

if ( posi cionYci reulo < 50 | | posi ci onYci reulo > 
275 ) { 

velocidadCi reulo = velocidadCi reulo * -1; 

} 
} 
} 



Ejercicio 2: Respondiendo al Ratón 
y al Teclado 

Ahora exploremos como cambiar el valor "boolean". En este ejercicio vamos a 
responder a la acción del usuario para cambiar el valor de nuestra variable llamada 
"mover". 

1. Agrega dos nuevos bloques: keyPressed (tecla presionada) y mousePressed (ra- 
tón presionado). Dentro de los nuevos bloques, modifica el valor de "mover". El 
código debería verse así: 
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/* 

Creadores: Rory Solomon y Becky Heritage 
Fecha: Feb. 8, 2009 
Licencia: CC-BY-SA 
*/ 

// declaración de variables 
int posicionYci rculo = 200; 
int velocidadCi rculo = 1; 
boolean mover = true; 

void setupO { 

size(400,400) ; // tamaño del boceto 
} 

void draw() { 
background(255) ; 

smooth () ; 
noStrokeO ; 
fill(100, 100,250) ; 

// dibuja un circulo 

ellipse (200, posicionYci rculo, 100, 100) ; 

fill(250,100,100,150) ; 

// dibuja un cuadrado 
rect(150,225,100,100) ; 

fill(250,250,100,100) ; 
triangle(125,200, 275,200, 200,100); 

// mover el circulo 
if ( mover ) { 

posi cionYci rculo = posi ci onYci rculo + velocidad- 
Ci rculo ; 
} 

if ( posi ci onYci rculo < 50 | | posi ci onYci rculo > 
275 ) { 

velocidadCi rculo = velocidadCi rculo * -1; 

} 
} 

void keyPressed () { 
mover = false; 
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} 



void mousePressed () { 

mover = true; 
} 



2. Analiza el código. Tenemos dos bloques nuevos. Ya sabemos que el bloque se- 
tup() será ejecutado al principio del boceto, y que el bloque draw() sera ejecutado 
repetidamente a un ritmo establecido por framerate(). El bloque keyPressed() se 
activará si el usuario presiona una tecla del teclado, y mousePressed() se activará si 
el usuario hace clic con el ratón. 

En nuestro ejemplo, presionar una tecla cambiará el valor de nuestra variable a 
falso, y deberá detener el círculo. Con "mover" apagado, el programa no cambiará 
la posición del círculo. 

Hacer clic con el ratón cambiará el valor de nuestra variable "mover" a verdadero. 
El círculo empezará a moverse de nuevo desde la posición en la que se detuvo. 
Ejecuta el boceto, usa el teclado y el ratón y ve que sucede. 



Ejercicio 2: Respondiendo al Ratón y al Teclado 309 



License 



All chapters copyright of the authors (see below). Unless otherwise stated all chap- 
ters in this manual licensed with GNU General Public License versión 2 

This documentation is free documentation; you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by the Free 
Software Foundation; either versión 2 of the License ,or (at your option) any later 
versión. 

This documentation is distributed in the hope that it will be useful, but WITHOUT 
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY 
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public 
License for more details. 

You should have received a copy of the GNU General Public License along with 
this documentation; if not, write to the Free Software Foundation, Inc., 51 Franklin 
Street, Fifth Floor, Boston, MA 02 110- 1301, USA. 
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